如何在运行时获取Javascript函数调用/跟踪

Question

当我在RUNTIME与基于AJAX的应用程序交互时,我希望控制台能够吐出它所调用的所有函数.(所以没有堆栈跟踪,或断点,或分析或任何东西)

例如,假设我在页面上按了一个按钮.我希望它能够在发生这种情况时返回它经历的所有功能:

所以我会在控制台中看到类似的东西(当我按下按钮时):

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

这基本上意味着button1Clicked()调用calculate()调用了printingResults()

是否有实用程序,插件,浏览器或者某种语言可以执行此操作？我正在使用谷歌浏览器,顺便说一句.

ps和NO我不想通过每个函数并添加一个"console.log("inside function X")"太多工作的b/c

pps作为一个额外的奖励,我希望看到传递给函数的参数,但也许是推动它.:>

Answer 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);以在调用时向所有全局函数添加日志记录.此外,如果您真的想要,您可以遍历树以查找任何功能并相应地更新它们.这种方法的一个缺点是它只适用于当时存在的函数.因此,它仍然不是最好的解决方案,但它比手工添加日志语句少了很多工作:)

Answer 2

这称为分析,Chrome和Firebug内置它.在Chrome开发者工具中,转到配置文件选项卡,然后单击记录(圆圈)按钮.执行ajax并在响应后,再次单击"录制"按钮停止.分析的结果将显示在右侧窗格中.

注意,这将为您提供一切所以如果您使用像jQuery这样的库,绝大多数函数调用对您来说都是垃圾.我已经尝试了几次,我发现做这console.log('inside <method>')件事更有帮助.

Answer 3

我刚刚发现你可以用console.trace()