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

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

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

火狐

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

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

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

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

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

显然，要进行调试，您需要单击reload：

现在，您可以添加断点通过单击行至一块要断点添加到JavaScript代码的左边：

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

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

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

铬合金

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

IE浏览器

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

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

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

JavaScript 中有一个debugger关键字来调试 JavaScript 代码。放置调试器；JavaScript 代码中的片段。那时它会自动开始调试 JavaScript 代码。

例如：

假设这是你的test.js文件

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

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

我使用古老的好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 出了什么问题，放置调试输出（不要忘记 wrap inif语句以减少数据量）并验证您的假设。修复问题或做出新的假设或将更多的调试输出放在位问题上。

同样对于堆栈跟踪使用：

console.trace();

如控制台所说

快乐黑客！