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

Posted 2023-02-19

【中文标题】如何调试我的 JavaScript 代码？ [关闭]

【英文标题】：How can I debug my JavaScript code? [closed]

【发布时间】：2010-11-02 13:37:39

【问题描述】：

当我发现我有一个有问题的代码sn-p时，我应该如何去调试它？

【问题讨论】：

youtu.be/hCnSDpEDITc

【参考方案1】：

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

【讨论】：

链接：getfirebug.com

我喜欢 firebug，但我不会声称它比 webkit 的检查器高出一筹。

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

自从我发现 Firebug 以来，我一直在使用它，它对我帮助很大！ console.debug、分析器、检查器...

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

【参考方案2】：

所有现代浏览器都带有某种形式的内置 javascript 调试应用程序。这些细节将在相关技术网页上介绍。我个人对调试 JavaScript 的偏好是 Firefox 中的 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

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

如果您没有这个，Internet Explorer 还提供了上面显示的所有工具。烦人的是，您没有使用 Chrome 或 Firefox 的 右键检查元素 功能，而是通过按 F12 访问开发者工具。 This question 涵盖了大部分内容。

【讨论】：

...你必须已经在复制粘贴缓冲区中准备好了，对吧？ :)

@ChristianTernus, answering your own question is perfectly valid

对不起，我完全错过了它是由同一个人问和回答的！我以为你每次有人问这个问题时都会输入某种 Javascript Debug Copypasta。

【参考方案3】：

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

【讨论】：

+1 Opera js 调试器提供比其他所有更好的错误消息

尽管 2009 年 Safari 可能在 2014 年淘汰了 Chrome 开发者工具，但我会在一周中的任何一天在 Chrome 中进行调试而不是 Safari。 Chrome 的开发工具和 Firefox 的 Firebug 是一流的......虽然使用起来很尴尬，但 IE11 的开发工具可能排在第三位（恕我直言）

【参考方案4】：

在 JavaScript 中有一个 debugger 关键字来调试 JavaScript 代码。将 debugger; sn-p 放入您的 JavaScript 代码中。它将在此时自动开始调试 JavaScript 代码。

例如：

假设这是你的 test.js 文件

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

func();

当浏览器在开发者选项中启用调试器运行网页时，它会自动从

调试器；

点开始调试。 应该有浏览器打开开发者窗口。

【讨论】：

在 Safari 上它有时有效，有时无效。我敢肯定这是我的事情。 FWIW 我已经为 JSContexts 启用了 Automatically Show Web Inspector。

【参考方案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();

如Console

黑客愉快！

【讨论】：

+1 for console.trace();与其他人不同的答案。

【参考方案6】：

从 Firebug 和 IE 调试器开始。

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

例子：

对于 Internet Explorer，它通常是逐渐变慢的，并且是某种内存泄漏类型的交易。半小时左右后，我需要重新启动。看起来很规律。

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

【参考方案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 让你很好地爆发。

【参考方案8】：

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

console.log() 是新的黑色——远胜于alert()。

【讨论】：

如果你把 console.log 放在你的代码中，记得删除它们，因为它会破坏 IE。

【参考方案9】：

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

【讨论】：

@Ken Link 坏了:(

@Thirisangu 谢谢！链接固定

【参考方案10】：

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

【参考方案11】：

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

【讨论】：

“Fiddler”是指 Fiddler Web 调试器吗？

【参考方案12】：

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

【讨论】：

对于基本调试，IE8 调试器满足了我的大部分需求。但是，如果您进行任何类型的性能测试，您很快就会发现 IE 缺乏。我最近有一个项目使用了一些繁重的 javascript，我们真的需要为劣质系统减少一些东西，因为我们遇到了可怕的“无响应的脚本错误”。 Firebug 在这种情况下是无价的，因为我能够运行 console.profile() 方法来找出我所有的时间都花在了哪里。

IE8 调试器还有一个配置文件功能（虽然不像 FireBug 那样图形化），它提供调用树、调用计数和每个方法花费的时间。我发现这足以隔离哪些 JS 代码花费的时间太长。

【参考方案13】：

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

【讨论】：

jQuery没有类似的功能吗？

【参考方案14】：

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

当然，如果您使用 Firefox，Firebug 也不错。

【参考方案15】：

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

【参考方案16】：

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

【参考方案17】：

除了 Firebug 和浏览器原生开发者扩展外，JetBrains WebStorm IDE 还内置了 remote debug support for Firefox and Chrome（需要扩展）。

还支持：

咖啡稿：how to debug coffeescript in node.js with webstorm 6 source maps node.js

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

【参考方案18】：

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

【参考方案19】：

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

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

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

【参考方案20】：

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

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

【讨论】：

请看这个链接： w3schools.com/js/js_debugging.asp太