调试 JS 文件 - 客户端代码答案

【问题标题】：debugging JS file - Client Side code调试 JS 文件 - 客户端代码
【发布时间】：2014-05-20 14:17:43
【问题描述】：

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

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

谢谢。

【问题讨论】：

最简单的方法并不美观，而是在每个函数中添加日志语句。然后只需检查控制台，您就会看到语句的顺序。
对于 Firefox，您可以使用 firebug。此外，IE、Chrome 和 Firefox 都在其工具集中内置了调试器。

标签： javascript debugging asynchronous developer-tools

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢....这个主意不错。我需要为我的所有方法添加 console.log 并检查。但这是另一个问题：假设应用程序部署在其他阶段或产品服务器中，我无法修改代码。但是我想查看方法的执行顺序以进行一些故障排除？那我们该怎么做呢？
这更像是一种蛮力的方式，绝对不建议进行适当的调试。
是的，我也同意 Ali Gangji 所说的 - 我刚刚看了看，chrome 有一套很好的断点工具，如果你按 F12 -> 源选项卡并找到你想要的资源正在寻找，可能有点挑剔，但可能会有所帮助:)

【解决方案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 很受欢迎。

您还可以使用console.timeline 代替chrome 中的console.log，如果使用得当，它可以为您提供很好的可见性。

【讨论】：