如何调试我的 JavaScript 代码？[关闭]

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

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

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

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

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

console.log()是新的黑色 -- 比 .alert()

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

从 Firebug 和 IE 调试器开始。

不过，要小心 JavaScript 中的调试器。每隔一段时间，它们就会对环境产生足够大的影响，从而导致您尝试调试的一些错误。

例子：

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

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

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

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

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

• Internet Explorer 8（开发人员工具 - ）。在Internet Explorer领域，其他任何东西都是二流的F12
• Firefox 和 Firebug。点击显示。F12
• Safari（显示菜单栏，首选项 -> 高级 -> 显示开发菜单栏）
• Google Chrome JavaScript 控制台 （ 或 （ + + ））。与Safari的浏览器基本相同，但Safari恕我直言更好。F12CtrlShiftJ
• Opera （工具 -> 高级 -> 开发者工具)

与大多数答案一样，这实际上取决于：您希望通过调试实现什么？基础开发，修复性能问题？对于基础开发，前面的所有答案都绰绰有余。

具体来说，对于性能测试，我推荐 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;
    }
  }
}

通过上述内容，您可以让自己进入一个弹出窗口调试的大循环，其中按 / 可以让您跳过每条消息，但按 / 可以让您很好地突破。EnterOkEscapeCancel

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

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

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

我使用古老的好方法（一种古老的技术，在任何时候都会很好地工作）。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()

两者在 Chrome 和 Firefox 中均可用。%onew Error().stack

有了这些强大的工具，你可以假设你的JS中出了什么问题，把调试输出（不要忘记换行语句以减少数据量）并验证你的假设。修复问题或做出新的假设，或将更多调试输出用于位问题。if

此外，对于堆栈跟踪，请使用：

console.trace();

如控制台

祝您黑客愉快！

所有现代浏览器都带有某种形式的内置 JavaScript 调试应用程序。这些细节将在相关技术网页上介绍。我个人对调试 JavaScript 的偏好是 Firefox 中的 Firebug。我并不是说 Firebug 比其他任何产品都好;这取决于您的个人喜好，无论如何，您可能都应该在所有浏览器中测试您的网站（我个人的首选始终是 Firebug）。

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

火狐浏览器

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

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

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

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

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

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

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

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

还可以添加监视变量，并通常执行新式调试工具中预期的所有操作。

有关 Firebug 中提供的各种选项的更多信息，请查看 Firebug 常见问题解答。

铬

Chrome 也有自己内置的 JavaScript 调试选项，其工作方式非常相似，右键单击、检查元素等。请查看 Chrome 开发者工具。我通常发现 Chrome 中的堆栈跟踪比 Firebug 更好。

IE浏览器

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

如果没有此功能，Internet Explorer 还提供上面显示的所有工具。令人讨厌的是，您无需右键单击检查 Chrome 或 Firefox 的元素功能，而是通过按 F12 访问开发人员工具。这个问题涵盖了大部分要点。

除了 Firebug 和浏览器原生开发人员扩展之外，JetBrains WebStorm IDE 还内置了对 Firefox 和 Chrome（需要扩展）的远程调试支持。

还支持：

• CoffeScript：如何使用 WebStorm 6 源映射在 Node.js 中调试 CoffeeScript
• 节点.js

免费测试的选项是 30 试用版或使用抢先体验版。

JavaScript 中有一个 debugger 关键字来调试 JavaScript 代码。将调试器代码片段放入 JavaScript 代码中。此时，它将自动开始调试 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 工具提供调试工具，例如断点、监视和局部变量查看以及控制台 用于消息和即时代码执行。