How can I debug my JavaScript code?

When I find that I have a problematic code snippet, how should I go about debugging it?

150990 次浏览
小开

Firebug 是用于此目的的最流行的工具之一。

小开

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

当然，如果您使用 Firefox，纵火犯是很好的。

小开

VisualStudio2008有一些非常好的 JavaScript 调试工具。您可以在客户端 JavaScript 代码中删除一个断点，然后使用与服务器端代码完全相同的工具逐步执行该断点。不需要附加到进程，也不需要执行任何复杂的操作来启用它。

小开

我使用的是 网络工具包开发者菜单/控制台(Safari 4)。

console.log() is the new black -- far better than alert().

小开

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

小开

从 Firebug 和 IE 调试器开始。

但是对 JavaScript 中的调试器要小心。每隔一段时间，它们都会对环境造成足够的影响，从而导致您正在尝试调试的一些错误。

例子:

对于 Internet Explorer 来说，这通常是一个逐渐放缓的过程，是某种内存泄漏类型的交易。大约半小时后，我需要重新开始。看起来很有规律。

对于 Firebug 来说，它可能已经存在一年多了，所以它可能是一个旧版本。结果，我不记得具体细节了，但基本上代码运行不正确，在尝试调试了一段时间后，我禁用了 Firebug，代码运行良好。

小开

在 Internet Explorer 8出来之前，我一直使用 纵火犯。我不是一个 Internet Explorer 的超级粉丝，但是在花了一些时间使用内置的开发工具(其中包括一个非常好的调试器)之后，似乎没有必要再使用其他东西了。我必须向微软致敬，他们在这个工具上做得非常好。

小开

您也可以查看 YUI Logger。使用它所需要做的就是在 HTML 中包含几个标记。它是 Firebug 的一个有用的补充，或多或少是必须的。

小开

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

小开
  • Internet Explorer 8(开发工具 -F12)。其他任何东西在 Internet Explorer 都是二流的
  • Firefox and 纵火犯. Hit F12 to display.
  • Safari (显示菜单栏，偏好-> 高级-> 显示显影菜单栏)
  • GoogleChromeJavaScript 控制台(F12或(Ctrl + Shift + J))。大多数浏览器与 Safari 相同，但是更好的浏览器是 Safari。
  • Opera (Tools-> 高级-> 开发工具)
小开

As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.

对于特定的性能测试，我推荐 Firebug。能够分析出哪些方法在时间上是最昂贵的，这对我从事过的许多项目来说是非常宝贵的。随着客户端库变得越来越健壮，并且通常将更多的责任放在客户端，这种类型的调试和分析只会变得更加有用。

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

小开

尽管 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可以让您很好地突破。

小开

除了使用 VisualStudio 的 JavaScript 调试器之外，我还编写了自己的简单面板，包含在页面中。它就像 Visual Studio 的 即时窗口。我可以更改变量的值，调用函数，并查看变量的值。它只是计算在文本字段中编写的代码。

小开

我正在使用 文克曼，一个用于 XUL应用程序的 JavaScript 调试器。

小开

如果您正在使用 视觉工作室，只需将 debugger;放在您想要调试的代码之上。在执行过程中，控件将在该位置暂停，您可以从那里开始一步一步地进行调试。

小开

我使用旧的良好的 printf方法(一个古老的技术，将工作在任何时候都很好)。

看看神奇的 %o:

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

转储 JS 对象的 可点击和深度浏览，打印漂亮内容。

还有这个:

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

为您提供到 new Error()调用点的类 Java 堆栈跟踪(包括 path to file and line number! !)。

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

使用这些强大的工具，您可以假设 JS 中出现了什么问题，输入调试输出(不要忘记使用 if语句包装以减少数据量)并验证您的假设。修正问题或作出新的假设或把更多的调试输出到位问题。

对于堆栈跟踪，也可以使用:

console.trace();

比如说 控制台

黑客愉快！

小开

所有现代浏览器都带有某种形式的内置 JavaScript 调试应用程序。这些细节将在有关技术的网页上介绍。我个人对调试 JavaScript 的偏好是 Firefox 中的 纵火犯。我并不是说 Firebug 比其他任何浏览器都好; 这取决于你的个人偏好，你可能应该在所有浏览器中测试你的网站(我个人的第一选择总是 Firebug)。

我将使用 以 Firebug 为例介绍下面的一些高级解决方案:

火狐

Firefox 带有自己的内置 JavaScript 调试工具，但我建议您安装 Firebug插件。这提供了一些基于基本版本的附加特性，非常方便。我在这里只谈 Firebug。

一旦安装了 Firebug，你可以像下面这样访问它:

首先，如果你右键点击任何元素，你可以 带有 Firebug 的检查元素:

Inspect Element in Firebug

点击这个按钮将会打开浏览器底部的 Firebug 窗格:

Firebug pane

Firebug 提供了几个特性，但是我们感兴趣的是 script 选项卡。单击 script 选项卡将打开这个窗口:

Script tab

显然，要调试，您需要单击 重新装弹:

JavaScript in the sctipt tab

现在，您可以通过单击要将断点添加到的 JavaScript 代码段左边的行来添加 断点:

Adding breakpoints

当命中断点时，它将如下所示:

A breakpoint being hit

您还可以添加 观察变量，并且通常可以在现代调试工具中完成预期的所有工作。

Watch varibables

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

Chrome

Chrome 也有自己的内建 JavaScript 调试选项，它的工作方式非常类似，右击、检查元件等。。看看 Chrome 开发工具。我发现 Chrome 中的 堆栈痕迹通常比 Firebug 好。

Internet Explorer

If you're developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.

If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the 右键单击检查元素 features of Chrome or Firefox, you access the developer tools by pressing F12. 这个问题 covers most of the points.

小开

除了 Firebug 和浏览器本地开发人员扩展 JetBrains WebStorm IDE 还内置了 对 Firefox 和 Chrome 的远程调试支持(所需的扩展)。

Also supports:

免费测试的选项是30试用版或使用 早期使用版本。

小开

JavaScript 中有一个 调试器关键字用于调试 JavaScript 代码。在 JavaScript 代码中放入 debugger;代码片段。此时它将自动开始调试 JavaScript 代码。

例如:

假设这是您的 Test Js文件

function func(){
//Some stuff
debugger;  //Debugging is automatically started from here
//Some stuff
}
func();
  • 当浏览器在启用调试器的情况下运行开发人员中的网页选项时，它会自动从 调试器;点开始调试。
  • 应该有打开开发者窗口的浏览器。
小开

通过按 F12 Web 开发人员可以在不离开浏览器的情况下快速调试 JavaScript 代码。它被内置到每一个 Windows 安装。

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


提交答案