问调试JS文件-客户端代码

EN

使用Chrome开发人员工具，您可以使用源代码面板来调试javascript。

在右侧，您可以为各种类型的事件添加断点，包括XHR断点。

当触发断点时，执行将停止，您可以单步执行整个执行流程。

我很确定Firefox和IE有类似的工具。

正如ryan S建议的那样，使用console.log可以是检查代码执行顺序的一种方式。所以你可以添加console.log("1: description")。

除了给定的答案之外，您还可以编写一个实用程序，它将使用日志记录包装对象的方法：

应该是这样的：

function addLogging(object) {   
    Object.keys(object).forEach(function (key) {
        if (typeof object[key] === 'function') {
            var originalFn = object[key];
            object[key] = function () {
                console.log('before calling', key);
                var result = originalFn.apply(this, arguments);
                console.log('after calling', key);
                return result;
            }
        }
    });
}

您可以使用lodash wrap方法来帮助您。

很久以前，我回答了一个类似上面代码的问题：jQuery logger plugin

它没有很好地处理构造函数，所以它有这样的问题。这是fixed resulting code。

你也可以看看sinon.js，它提供间谍，它可以决定间谍函数的调用顺序。但是仅仅是这样可能就有点太多了，而且它可能会让事情变慢一点。

这种方法在aspect oriented programming中是很常见的。您可以对其进行搜索，也许可以尝试使用AOP库。meld是一个很流行的工具。

此外，您可以使用console.timeline来代替chrome中的console.log，如果使用得当，它将为您提供更好的可见性。