web-dev-qa-db-ja.com

firebugを使用してプログラム全体の関数ログ/ stackトレースを出力します

Firebugには、特定の関数名への呼び出しを記録する機能があります。時々ページのレンダリングを停止するが、エラーや警告を引き起こさないバグを探しています。バグは約半分の時間でしか現れません。それでは、プログラム全体のすべての関数呼び出しのリスト、またはプログラム全体の実行のためのある種のスタックトレースを取得するにはどうすればよいですか？

javascriptfirebug
89
amccormack

Firefoxが提供console.trace()これは呼び出しスタックを印刷するのに非常に便利です。 Chrome および IE 11 でも利用可能です。

または、次のようなものを試してください。

function print_call_stack() {
  var stack = new Error().stack;
  console.log("PRINTING CALL STACK");
  console.log( stack );
}
206
Matt Schwartz

スタックトレースが必要な場合、次のことを行います。おそらく、そこからインスピレーションを引き出すことができます。

function logStackTrace(levels) {
    var callstack = [];
    var isCallstackPopulated = false;
    try {
        i.dont.exist += 0; //doesn't exist- that's the point
    } catch (e) {
        if (e.stack) { //Firefox / chrome
            var lines = e.stack.split('\n');
            for (var i = 0, len = lines.length; i < len; i++) {
                    callstack.Push(lines[i]);
            }
            //Remove call to logStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
        else if (window.opera && e.message) { //Opera
            var lines = e.message.split('\n');
            for (var i = 0, len = lines.length; i < len; i++) {
                if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
                    var entry = lines[i];
                    //Append next line also since it has the file info
                    if (lines[i + 1]) {
                        entry += " at " + lines[i + 1];
                        i++;
                    }
                    callstack.Push(entry);
                }
            }
            //Remove call to logStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
    }
    if (!isCallstackPopulated) { //IE and Safari
        var currentFunction = arguments.callee.caller;
        while (currentFunction) {
            var fn = currentFunction.toString();
            var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf("(")) || "anonymous";
            callstack.Push(fname);
            currentFunction = currentFunction.caller;
        }
    }
    if (levels) {
        console.log(callstack.slice(0, levels).join('\n'));
    }
    else {
        console.log(callstack.join('\n'));
    }
};

モデレーターのメモ：この回答のコードは Eric Wenderlinのブログのこの投稿 にも表示されているようです。ただし、この回答の著者は、ここにリンクされているブログ投稿の前に書かれた自分のコードであると主張しています。誠実を期すために、投稿とこのメモへのリンクを追加しました。

13
Martin Jespersen

私はこれをfirebugなしで達成しました。 chromeとfirefoxの両方でテスト済み：

console.error("I'm debugging this code.");

プログラムがそれをコンソールに出力したら、小さな矢印をクリックして呼び出しスタックを展開できます。

6
satnam

コードを1行ずつ、または一度に1つの関数ずつステップ実行して、どこで正しく動作しなくなるかを判断してください。または、合理的な推測を行い、コードを介してロギングステートメントを分散します。

2
casablanca