Question

有没有简单的方法可以让我们知道在运行时调用方法的顺序？

示例：在我的JS文件中，我有大约15种方法。有一些异步调用。使用异步调用，我们永远不会知道它们被调用和执行的顺序。所以：我想知道，如果有一种方法我们可以调试（使用开发人员工具，IE \ Chrome \ FF）..任何工具告诉我首先调用哪个异步调用以及调用它们的顺序。

感谢。

Answer 1

使用Chrome开发者工具，您可以使用“来源”面板调试javascript。

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

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

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

Answer 2

正如ryan S建议的那样，使用console.log可以检查代码执行的顺序。所以你可以添加console.log（＆＃34; 1：[description]＆＃34;）。

Answer 3

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

就像这样：

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是一个受欢迎的。

而不是chrome中的console.log，您可以使用console.timeline，如果使用正确，可以提供极佳的可见性。

调试JS文件 - 客户端代码

3 个答案: