如何调试我的JavaScript代码？

Question

当我发现我的代码片段有问题时，我应该如何调试呢？

Answer 1

Firebug是用于此目的的最受欢迎的工具之一。

Answer 2

所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。有关详细信息将在相关技术网页上介绍。我在Firefox中调试JavaScript的个人偏好是Firebug。我不是说Firebug比其他任何一个都好;这取决于你的个人喜好，你应该在所有的浏览器中测试你的网站，但我的第一个，个人的首选始终是Firebug。

我将使用 Firebug作为示例来介绍下面的一些高级解决方案：

火狐

Firefox自带内置的JavaScript调试工具，但我建议您安装Firebug添加。这提供了一些基于基本版本的附加功能，非常方便。我这里只会谈论Firebug。

安装Firebug后，您可以像下面一样访问它：

首先，如果您右键单击任何元素，您可以使用Firebug检查元素：

单击此按钮将打开浏览器底部的Firebug窗格：

Firebug提供了一些功能，但其中一个感兴趣的是脚本选项卡。单击脚本选项卡将打开以下窗口：

显然，要调试你需要点击 reload ：

现在，您可以点击要添加断点的JavaScript代码左侧的行来添加breakpoints：

当您的断点被击中时，它将如下所示：

您还可以添加watch variables，并且通常会在现代调试工具中执行您期望的所有操作。

有关Firebug中提供的各种选项的更多信息，请查看Firebug FAQ。

铬

Chrome也有自己的内置JavaScript调试选项，它以非常类似的方式工作，右键单击，检查元素等。看看Chrome Developer Tools。我通常会发现Chrome中的stack traces比Firebug更好。

Internet Explorer

如果您使用Web开发环境在.NET中进行开发并使用Visual Studio，则可以通过放置断点等直接调试JavaScript代码。您的JavaScript代码与调试C＃或{{}时的代码完全相同3}}代码。

如果您没有此功能，Internet Explorer还会提供上面显示的所有工具。令人讨厌的是，您可以通过按 F12 来访问开发人员工具，而不是使用Chrome或Firefox的右键单击检查元素功能。 VB.NET涵盖了大部分要点。

Answer 3

• Internet Explorer 8（开发人员工具 - F12 ）。其他任何东西都是Internet Explorer中的第二速率
• Firefox和Firebug。按 F12 显示。
• Safari（显示菜单栏，偏好设置 - ＆gt; 高级 - ＆gt; 显示开发菜单栏）
• Google Chrome JavaScript控制台（ F12 或（ Ctrl + Shift + J ））。通常与Safari相同的浏览器，但Safari更好恕我直言。
• Opera（工具 - ＆gt; 高级 - ＆gt; 开发人员工具）

Answer 4

JavaScript中有一个调试器关键字来调试JavaScript代码。将调试器; 代码段放在JavaScript代码中。它会在那时自动开始调试JavaScript代码。

例如：

假设这是您的 test.js 文件

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• 当浏览器在启用了调试器的开发人员选项中运行网页时，它会自动从调试器点开始调试。
• 应该打开浏览器的开发者窗口。

Answer 5

我使用旧的printf方法（一种古老的技术，可以随时使用）。

看看魔术%o：

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%o dump JS对象的可点击且可深度浏览，精美打印的内容。 %s只是为了记录而展示。

而且：

console.log("%s", new Error().stack);

为您提供类似Java的堆栈跟踪到new Error()调用点（包括文件路径和行号 !!）。

Chrome和Firefox中都提供%o和new Error().stack。

使用这些功能强大的工具，您可以假设JS中存在错误，输入调试输出（不要忘记在if语句中包装以减少数据量）并验证您的假设。修复问题或做出新假设或将更多调试输出添加到位问题。

对于堆栈跟踪，请使用：

console.trace();

如Console

所述

快乐的黑客攻击！

Answer 6

从Firebug和IE Debugger开始。

但是要小心JavaScript中的调试器。每隔一段时间，它们就会影响环境，足以导致您尝试调试的一些错误。

示例：

对于Internet Explorer，它通常是逐渐减速并且是某种内存泄漏类型的交易。大约半小时后我需要重新启动。这似乎是相当规律的。

对于Firebug来说，它可能已经超过一年，所以可能是旧版本。因此，我不记得具体细节，但基本上代码没有正确运行，在尝试调试它一段时间后我禁用了Firebug并且代码工作正常。

Answer 7

尽管alert(msg);适用于那些“我只是想了解最新情况”的情况...... 每个开发人员遇到过这种情况，你最终会遇到（非常大或你无法摆脱的无尽的循环。

我建议在开发期间如果你想要一个非常面对面的调试选项，请使用一个可以让你突破的调试选项。 （PS Opera，Safari？和Chrome？都可以在他们的原生对话框中找到它们）

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

使用上面的内容，您可以将自己置于弹出式调试的大循环中，按 Enter / Ok 可以跳过每条消息，但按逃生 / 取消让你爆发出色。

Answer 8

我使用WebKit's开发人员菜单/控制台（Safari 4）。它与Firebug几乎相同。

console.log()是新的黑色 - 远远超过alert()。

Answer 9

我的第一步始终是验证HTML并使用JSLint检查语法。如果你有干净的标记和有效的JavaScript代码，那么现在是Firebug或其他调试器的时候了。

Answer 10

我使用了一些工具：Fiddler，Firebug和Visual Studio。我听说Internet Explorer 8有一个很好的内置调试器。

Answer 11

我曾经使用过Firebug，直到Internet Explorer 8问世。我不是Internet Explorer的忠实粉丝，但是在花了一些时间使用内置的开发人员工具（其中包括一个非常好的调试器）后，使用其他任何东西似乎毫无意义。我不得不向微软倾诉，他们在这个工具上做得非常出色。

Answer 12

您也可以查看YUI Logger。您只需在HTML中包含几个标记即可使用它。它对Firebug来说是一个有用的补充，它或多或少是必须的。

Answer 13

Visual Studio 2008有一些非常好的JavaScript调试工具。您可以在客户端JavaScript代码中删除断点，并使用与服务器端代码完全相同的工具逐步执行该代码。无需附加到流程或执行任何棘手的操作即可启用它。

Answer 14

除了使用Visual Studio的JavaScript调试器之外，我还编写了自己的简单面板，并将其包含在页面中。它就像Visual Studio的Immediate window一样。我可以更改变量的值，调用我的函数，并查看变量的值。它只是评估在文本字段中编写的代码。

Answer 15

我正在使用Venkman，这是XUL应用程序的JavaScript调试器。

Answer 16

如果您使用Visual Studio，只需将debugger;放在要调试的代码上方即可。在执行期间，控件将在该位置暂停，您可以从那里逐步调试。

Answer 17

我发现新版本的Internet Explorer 8（按 F12 ）非常适合调试JavaScript代码。

当然，如果您使用Firefox，Firebug会很好。

Answer 18

除了Firebug和浏览器本地开发人员扩展 JetBrains WebStorm IDE内置了remote debug support for Firefox and Chrome（需要扩展）。

还支持：

• coffescript：how to debug coffeescript in node.js with webstorm 6 source maps
• node.js

免费测试此选项的选项是30次试用或使用Early Access Version。

Answer 19

与大多数答案一样，这实际上取决于：您在调试时想要实现的目标是什么？基本开发，修复性能问题？对于基本开发，所有以前的答案都是绰绰有余的。

对于性能测试，我建议使用Firebug。能够分析哪些方法在时间上是最昂贵的，对于我参与的许多项目来说都是非常宝贵的。随着客户端库变得越来越强大，并且更多的责任放在客户端，这种类型的调试和分析只会变得更有用。

Firebug控制台API： http://getfirebug.com/console.html

Answer 20

通过按 F12 ，Web开发人员可以快速调试JavaScript代码而无需离开浏览器。它内置于Windows的每个安装中。

在Internet Explorer 11中， F12工具提供调试工具，例如断点，监视和本地变量查看以及控制台 用于消息和立即执行代码。