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

【问题标题】：What are the rights ways of debugging javascript?调试javascript的正确方法是什么？
【发布时间】：2013-03-14 09:22:33
【问题描述】：

我在 javascript 文件中创建了一个名为 test() 的函数。在其中放置了一个简单的警报。

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

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

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

【问题讨论】：

console.log() 和 alert()。
可以使用debugger语句在js代码中下断点。
Possible duplicate
我认为目前最好的调试工具是在 Chrome 中，只需按 F12 并开始消除那些 js 错误 :-) 有时您可能需要在其他浏览器中进行调试，也有工具可以做到这一点 - Firebug Firefox 和 IE 的扩展有类似 Chrome 的工具。
顺便说一句，如果贵公司的高级人员通过注释掉整个功能来解决问题，则可能有问题 :-D 有时它可能是最好的方法，但对我来说似乎很奇怪，没有人知道调试工具...

【解决方案1】：

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

此外，您不应该使用alert() 进行调试，因为这可能会给生产版本带来不同的结果，因为alert() 会导致脚本暂停。

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

根据您的浏览器选择，有一些调试选项——我倾向于使用 Firefox，所以在我的例子中是 Firebug。有一个问题列出了其他浏览器的选项 - What is console.log and how do I use it?

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

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

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

    // Existing code
};

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

也可以使用console.log()来显示变量的内容——console.log(el);

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

【讨论】：

【解决方案4】：

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

一个制作他的第一个 javascript 函数的人怎么会发现它？？？

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

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

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

【讨论】：