javascript - 调试javascript的正确方法是什么？

Question

我制作了一个test()在 javascript 文件中调用的函数。在其中放置了一个简单的警报。

在 html 文件中，在单击按钮时调用该方法。但是，它没有被调用。

问题出在第 11 个函数中，与我的无关！！！！但是，一个制作他的第一个 javascript 函数的人怎么能找到它？？？

我正在寻找调试 javascript 的最佳方法。

score 5 · Accepted Answer

您可以使用许多现代浏览器调试 javascript。有关如何在 Google Chrome 中调试的详细信息，请参阅此问题：

此外，您不应将alert()其用于调试，因为这会alert()导致脚本暂停，从而为生产版本提供不同的结果。

最佳做法是console.log()在浏览器控制台中使用和查看输出。

您还可以放入debugger您的 javascript 代码以强制断点。但是我不喜欢使用它，因为在部署之前忘记删除它会导致您的脚本暂停，这可能会非常尴尬！

score 1 · Accepted Answer

您应该使用浏览器提供的调试控制台。

Chrome 内置，按CTRL+ SHIFT+ j。在 Firefox 中，安装 Firebug 插件。

在您的代码中，添加alert()以显示流程并获取变量值。

此外，使用console.log()which 只会输出到调试控制台。

score 0 · Accepted Answer

要在问题中回答您的问题，

一个制作他的第一个 javascript 函数的人怎么能找到它？？？

好吧，例如，当 JavaScript 出现问题时，您犯了语法错误 - 脚本将从那里停止工作。但是，这不会阻止 HTML 呈现，因此它看起来好像一切都是正确的（特别是如果您的 JS 没有改变页面的外观）但是 JS 的所有功能都将失效。

这就是为什么我们使用调试工具（在此处的其他答案中列出）来查看问题所在，在这种情况下，很容易注意到哪个函数有错误并导致整个脚本中断。这可能也会为您的老年人节省几分钟。

最好的方法是经常测试，这样无论何时遇到错误，您都可以立即修复它们。

score 0 · Accepted Answer

根据您的浏览器选择，有一些调试选项——我倾向于使用 Firefox，所以在我的情况下是 Firebug。有一个问题列出了其他浏览器的选项 -什么是 console.log 以及如何使用它？

除非您正在处理的项目已经采用了调试机制，否则console.log()在跟踪问题时往往是一个简单而有用的选项。

在调试时，您可以采用在输入函数时注销一行的方法，如下所示：

var myFunc = function(el) {
    console.log('Inside myFunc');

    // Existing code
};

这将使您能够查看哪些函数已被调用，并让您大致了解执行顺序。

您还可以使用console.log()显示变量的内容 -console.log(el);

完成后请注意删除/禁用console.log()调用，因为它可能会导致生产中的一些问题。

4 回答 4