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

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

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

---

谢谢。

正如ryan建议的那样，使用console.log可以检查代码执行顺序。因此，您可以添加console.log（“1:[说明]”）。

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

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

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

---

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

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

是这样的:

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;
            }
        }
    });
}

你可以用这个方法来帮助你

很久以前，我已经回答了一个关于类似上述代码的问题：

它不能完美地处理构造函数，所以它有类似的问题。这是我的建议

您还可以看看，它提供了间谍，它可以确定间谍函数的调用顺序。但这可能有点太多了，而且可能会让事情慢下来一点

这种方法是一种常用的方法。您可以搜索它，也许可以尝试使用AOP库。这是一个流行的

---

您还可以在chrome中使用console.log，而不是console.log，如果使用正确，这将为您提供很好的可视性。

最简单的方法不是美观，而是在每个函数中添加日志语句。然后只需检查控制台，您就会看到语句的顺序。对于Firefox，您可以使用

firebug

。IE、Chrome和Firefox的工具集中都有内置调试器。谢谢。。。。这个主意很好。我需要为所有方法添加console.log并进行检查。但这里还有另一个问题：假设应用程序部署在其他阶段或prod服务器上，而我无法修改代码。但是为了解决一些问题，我想看看方法的执行顺序？那我们该怎么做呢？这更像是一种蛮力的方式，绝对不会重新开始进行适当的调试。是的，我也同意Ali Gangji所说的——我刚刚看了一下chrome，chrome有一套很好的断点工具，如果你按F12->sources选项卡并找到你正在寻找的资源，这可能有点挑剔，但可能会有所帮助：）