42

「 https://stackoverflow.com/questions/1385335/how-to-generate-function-call-graphs-for-javascript 」を見て、試してみました。抽象的な構文ツリーを取得したい場合は、うまく機能します。

残念ながら、Closure Compiler は--print_tree、--print_astおよびのみを提供しているよう--print_pass_graphです。それらのどれも私にとって役に立ちません。

どの関数が他のどの関数を呼び出すかのチャートを見たいです。

4

4 に答える 4

19

code2flowはまさにこれを行います。完全な開示、私はこのプロジェクトを始めました

走る

$ code2flow source1.js source2.js -o out.gv

次に、graphviz で out.gv を開きます。

編集：今のところ、このプロジェクトは維持されていません。code2flow を使用する前に、別のソリューションを試すことをお勧めします。

于 2013-06-06T21:55:15.157 に答える
6

出力をフィルタリングすると、closure --print_tree必要なものが得られます。

たとえば、次のファイルを使用します。

var fib = function(n) {
    if (n < 2) {
        return n;
    } else {
        return fib(n - 1) + fib(n - 2);
    }
};

console.log(fib(fib(5)));

の出力をフィルタリングするclosure --print_tree

            NAME fib 1 
                FUNCTION  1 
                                    CALL 5 
                                        NAME fib 5 
                                        SUB 5 
                                            NAME a 5 
                                            NUMBER 1.0 5 
                                    CALL 5 
                                        NAME fib 5 
                                        SUB 5 
                                            NAME a 5 
                                            NUMBER 2.0 5 
        EXPR_RESULT 9 
            CALL 9 
                GETPROP 9 
                    NAME console 9 
                    STRING log 9 
                CALL 9 
                CALL 9 
                    NAME fib 9 
                    CALL 9 
                    CALL 9 
                        NAME fib 9 
                        NUMBER 5.0 9

そして、すべての呼び出しステートメントを見ることができます。

これを行うために、次のスクリプトを作成しました。

./call_tree

#! /usr/bin/env sh
function make_tree() {
    closure --print_tree $1 | grep $1
}

function parse_tree() {
    gawk -f parse_tree.awk
}

if [[ "$1" = "--tree" ]]; then
    make_tree $2
else
    make_tree $1 | parse_tree
fi

parse_tree.awk

BEGIN {
    lines_c = 0
    indent_width = 4
    indent_offset = 0
    string_offset = ""
    calling = 0
    call_indent = 0
}

{
    sub(/\[source_file.*$/, "")
    sub(/\[free_call.*$/, "")
}

/SCRIPT/ {
    indent_offset = calculate_indent($0)
    root_indent = indent_offset - 1
}

/FUNCTION/ {
    pl  = get_previous_line()
    if (calculate_indent(pl) < calculate_indent($0))
        print pl
    print
}

{
    lines_v[lines_c] = $0
    lines_c += 1
}

{
    indent = calculate_indent($0)
    if (indent <= call_indent) {
        calling = 0
    }
    if (calling) {
        print
    }
}

/CALL/ {
    calling = 1
    call_indent = calculate_indent($0)
    print
}

/EXPR/{
    line_indent = calculate_indent($0)
    if (line_indent == root_indent) {
        if ($0 !~ /(FUNCTION)/) {
            print
        }
    }
}

function calculate_indent(line) {
    match(line, /^ */)
    return int(RLENGTH / indent_width) - indent_offset
}

function get_previous_line() {
    return lines_v[lines_c - 1]
}
于 2012-04-18T23:30:11.333 に答える
4

私はついにUglifyJS2とDot/GraphVizを使用して、上記の回答とリンクされた質問への回答を組み合わせてこれを管理しました。

私にとって欠けていたのは、解析されたASTをフィルタリングする方法でした。UglifyJSにはTreeWalkerオブジェクトがあり、基本的にASTの各ノードに関数を適用します。これは私がこれまでに持っているコードです：

//to be run using nodejs
var UglifyJS = require('uglify-js')
var fs = require('fs');
var util = require('util');

var file = 'path/to/file...';
//read in the code
var code = fs.readFileSync(file, "utf8");
//parse it to AST
var toplevel = UglifyJS.parse(code);
//open the output DOT file
var out = fs.openSync('path/to/output/file...', 'w');
//output the start of a directed graph in DOT notation
fs.writeSync(out, 'digraph test{\n');

//use a tree walker to examine each node
var walker = new UglifyJS.TreeWalker(function(node){
    //check for function calls
    if (node instanceof UglifyJS.AST_Call) {
        if(node.expression.name !== undefined)
        {
        //find where the calling function is defined
        var p = walker.find_parent(UglifyJS.AST_Defun);

        if(p !== undefined)
        {
            //filter out unneccessary stuff, eg calls to external libraries or constructors
            if(node.expression.name == "$" || node.expression.name == "Number" || node.expression.name =="Date")
            {
                //NOTE: $ is from jquery, and causes problems if it's in the DOT file.
                //It's also very frequent, so even replacing it with a safe string
                //results in a very cluttered graph
            }
            else
            {

                fs.writeSync(out, p.name.name);
                fs.writeSync(out, " -> ");
                fs.writeSync(out, node.expression.name);
                fs.writeSync(out, "\n");
            }
        }
        else
        {
            //it's a top level function
            fs.writeSync(out, node.expression.name);
            fs.writeSync(out, "\n");
        }

    }
}
if(node instanceof UglifyJS.AST_Defun)
{
    //defined but not called
    fs.writeSync(out, node.name.name);
    fs.writeSync(out, "\n");
}
});
//analyse the AST
toplevel.walk(walker);

//finally, write out the closing bracket
fs.writeSync(out, '}');

私はそれをノードで実行し、次に出力を通過させます

dot -Tpng -o graph_name.png dot_file_name.dot

ノート：

それはかなり基本的なグラフを提供します-白黒のみでフォーマットはありません。

他の人が言及しているように、それはajaxをまったくキャッチせず、おそらくそのようなものでもeval、withどちらでもないでしょう。

また、現状では、他の関数によって呼び出される関数（したがって、他の関数を呼び出す関数）、独立して呼び出される関数、および定義されているが呼び出されていない関数がグラフに含まれています。

これらすべての結果として、関連性のあるものを見逃したり、関連性のないものを含めたりする可能性があります。しかし、それは始まりであり、私が求めていたもの、そしてそもそもこの質問に私を導いたものを達成しているように見えます。

于 2013-01-09T18:39:48.773 に答える
1

https://github.com/mishoo/UglifyJS は、javascript で ast にアクセスできます。

アストコーヒー

util = require 'util'
jsp = require('uglify-js').parser

orig_code = """

var a = function (x) {
  return x * x;
};

function b (x) {
  return a(x)
}

console.log(a(5));
console.log(b(5));

"""

ast = jsp.parse(orig_code)

console.log util.inspect ast, true, null, true
于 2012-04-19T16:44:04.313 に答える