如何调试JavaScript代码？

Question

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

- Canavar

Answer 1

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

- Ryan Oberoi

---

这是需要翻译的内容：Link it up: http://getfirebug.com/这是翻译后的结果：将其链接起来：http://getfirebug.com/ - Annika Backstrom

我喜欢 Firebug，但我不会声称它比 Webkit 的检查器更出色。 - Ryan Florence

Firebug在推出时领先于其时代，但考虑到最近推出的其他工具，我不认为它是最好的工具。 - James

自从我发现Firebug以来，我就一直在使用它，它帮了我很多忙！console.debug、profiler、inspector... - Julio Greff

@NinaScholz 现在所有浏览器默认都带有喷气背包！ - oneCoderToRuleThemAll

Answer 2

所有现代浏览器都配备了某种形式的内置JavaScript调试应用程序。这些细节将在相关技术网页上进行介绍。我个人偏好于使用Firefox中的Firebug来调试JavaScript。我并不是说Firebug比其他工具更好；这取决于你的个人喜好，而且你应该在所有浏览器中测试你的网站（我的个人首选始终是Firebug）。

下面，我将以Firebug作为示例，介绍一些高级解决方案：

Firefox

Firefox带有其自己内置的JavaScript调试工具，但我建议您安装Firebug插件。它提供了基本版本的几个附加功能，非常方便。这里我只讲述Firebug。

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

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

点击此按钮将在浏览器底部打开Firebug面板。

Firebug提供了多种功能，但我们感兴趣的是脚本选项卡。点击脚本选项卡将打开此窗口:

显然，要进行调试，您需要单击“重新加载”：

reload

现在，您可以通过单击JavaScript代码片段左侧的行来添加断点：

当断点被触发时，它会如下所示：

你可以添加观察变量和一般现代调试工具所期望的所有功能。

如需了解Firebug中提供的各种选项的更多信息，请查看Firebug FAQ。

Chrome

Chrome还具有自己内置的JavaScript调试选项，其工作方式非常相似，右键单击，检查元素等。请查看Chrome Developer Tools。我通常发现Chrome中的stack traces比Firebug好。

Internet Explorer

如果您正在使用Visual Studio使用Web开发环境开发.NET并且使用，则可以通过放置断点等直接调试JavaScript代码。您的JavaScript代码看起来与调试C#或VB.NET代码完全相同。

如果你没有这个，Internet Explorer也提供了上述所有工具。令人恼火的是，它没有Chrome或Firefox的“右键检查元素”功能，你需要按F12来访问开发者工具。此问题涵盖了大部分要点。

- Liam

---

你一定已经把它复制粘贴到缓冲区了，对吧？ :) - Christian Ternus

回答自己的问题是完全有效的。 - Liam

抱歉，我完全没注意到这是由同一个人提出问题并回答的！我以为你有某种Javascript调试复制粘贴代码，每次有人问这个问题时都会使用它。 - Christian Ternus

Answer 3

• Internet Explorer 8（开发者工具 - F12）。在Internet Explorer领域，其他浏览器都是次等的。
• Firefox和Firebug。按下F12显示。
• Safari（显示菜单栏，偏好设置->高级->显示开发菜单栏）
• Google Chrome JavaScript控制台（F12或(Ctrl+Shift+J)）。大多数方面与Safari相似，但我个人认为Safari更好。
• Opera（工具->高级->开发者工具）

- Chris Brandsma

---

+1 Opera JS调试器提供了比其他所有调试器更好的错误信息。 - Gabriel Solomon

尽管在2009年Safari的开发者工具可能比Chrome更胜一筹，但在2014年，我每天都会选择在Chrome中进行调试而不是在Safari中。Chrome的开发者工具和Firefox的Firebug非常出色，尽管使用起来有些棘手，但我认为IE11的开发者工具也是排名第三的（个人意见）。 - scunliffe

Answer 4

在JavaScript中有一个debugger关键字用于调试JavaScript代码。在您的JavaScript代码中放置debugger;片段即可自动开始调试JavaScript代码。

例如：

假设这是您的test.js文件。

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

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

- Suresh Mahawar

---

在Safari上有时候它能工作，有时候不能。我确定这是我的问题。顺便说一下，我已经启用了JSContexts的自动显示Web检查器。 - 1.21 gigawatts

Answer 5

我使用古老而可靠的printf方法（一种古老的技术，在任何时候都能很好地工作）。

看看神奇的%o：

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

%o将JS对象的内容进行漂亮打印后，呈现为可点击和深度浏览的形式。而%s则只是用于记录。

还有这个：

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

提供类似Java的堆栈跟踪以指向new Error()调用点（包括文件路径和行号！！）。

%o和new Error().stack都可在Chrome和Firefox中使用。

拥有如此强大的工具，您可以假设JS出了什么问题，输出调试输出（别忘了将其包装在if语句中以减少数据量），并验证您的假设。修复问题或进行新的假设或添加更多调试输出以解决问题。

同时，在堆栈跟踪中使用：

console.trace();

如下所述 控制台

愉快的黑客!

- gavenkoa

---

+1 for console.trace(); 与众不同的答案。 - Saurabh Patil

Answer 6

从Firebug和IE Debugger开始。

但是要注意在JavaScript中调试器。偶尔会对环境产生足够的影响，以至于导致您正在尝试调试的一些错误。

示例：

对于Internet Explorer，通常是逐渐减慢速度并且有一些内存泄漏类型的问题。大约半个小时后，我需要重新启动。它似乎相当规律。

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

- Tom Hubbard

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让你跳过每个消息，但按下Escape/Cancel可以优雅地退出。

- scunliffe

Answer 8

我使用 WebKit 的开发者菜单/控制台（Safari 4）。它与 Firebug 几乎相同。 console.log() 是新黑色 - 比 alert() 更好。

- Ryan Florence

---

如果你在代码中到处使用console.log，请记得将它们删除，因为这会破坏IE。 - Liam

Answer 9

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

- Ken

---

@Ken 链接 已损坏 :( - Thirisangu Ramanathan

@Thirisangu 谢谢！链接已修复。 - Ken

Answer 10

Visual Studio 2008拥有非常好用的JavaScript调试工具。您可以在客户端JavaScript代码中放置断点，并使用与服务器端代码相同的工具逐步执行它。无需附加到进程或进行任何棘手的操作即可启用此功能。

- JohnFx