実行時にJavascript関数呼び出し/トレースを取得する方法 質問する

実行時にJavascript関数呼び出し/トレースを取得する方法 質問する

AJAXベースのアプリケーションを操作すると、ランタイムコンソールに、呼び出しているすべての関数を表示させたいです。(スタック トレース、ブレークポイント、プロファイリングなどは不要です)

たとえば、ページ上のボタンを押したとします。そのときに実行されたすべての関数を返すようにしたいと思います。

そのため、コンソールには次のような内容が表示されます (ボタンを押したとき)。

1. button1Clicked();
2.     calculating();
3.          printingResults();

これは基本的に、button1Clicked() がcalculating() を呼び出し、それがprintingResults() を呼び出したことを意味します。

これを実行するためのユーティリティ、プラグイン、ブラウザ、あるいは言語内の何らかの方法はありますか? ちなみに、私は Google Chrome を使用しています。

追伸:各機能を調べて追加するのはやりたくないです。"console.log("inside function X")"それは手間がかかりすぎるからです。

追記:追加のボーナスとして、関数に渡される引数も確認したいのですが、それは無理があるかもしれません。:>

ベストアンサー1

すべての関数呼び出しをグローバルにインターセプトしてログを挿入する優れた方法は思いつきません (ただし、以下の更新セクションに適切な回避策があります)。

代わりに、関心のある特定の名前空間の関数にのみログ記録を追加するのはどうでしょうか。これは、次のセットアップ コードで実行できます。

var functionLogger = {};

functionLogger.log = true;//Set this to false to disable logging 

/**
 * Gets a function that when called will log information about itself if logging is turned on.
 *
 * @param func The function to add logging to.
 * @param name The name of the function.
 *
 * @return A function that will perform logging and then call the function. 
 */
functionLogger.getLoggableFunction = function(func, name) {
    return function() {
        if (functionLogger.log) {
            var logText = name + '(';

            for (var i = 0; i < arguments.length; i++) {
                if (i > 0) {
                    logText += ', ';
                }
                logText += arguments[i];
            }
            logText += ');';

            console.log(logText);
        }

        return func.apply(this, arguments);
    }
};

/**
 * After this is called, all direct children of the provided namespace object that are 
 * functions will log their name as well as the values of the parameters passed in.
 *
 * @param namespaceObject The object whose child functions you'd like to add logging to.
 */
functionLogger.addLoggingToNamespace = function(namespaceObject){
    for(var name in namespaceObject){
        var potentialFunction = namespaceObject[name];

        if(Object.prototype.toString.call(potentialFunction) === '[object Function]'){
            namespaceObject[name] = functionLogger.getLoggableFunction(potentialFunction, name);
        }
    }
};

次に、ログ記録を追加する namespaceObject に対して、以下を呼び出すだけです。

functionLogger.addLoggingToNamespace(yourNamespaceObject);

バイオリンです実際に動作しているところを見てみましょう。

アップデート
呼び出し時に、すべてのグローバル関数にログを追加するために を呼び出すことができることに注意してくださいfunctionLogger.addLoggingToNamespace(window);。また、本当に必要な場合は、ツリーをトラバースして関数を見つけ、それに応じて更新することもできます。この方法の唯一の欠点は、その時点で存在する関数に対してのみ機能することです。したがって、これはまだ最高のソリューションではありませんが、手動でログ ステートメントを追加するよりもはるかに手間がかかりません :)

おすすめ記事