如何调试JavaScript代码？

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

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

我发现新版InternetExplorer8（按F12键）非常适合调试JavaScript代码

---

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

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

我使用开发者菜单/控制台（Safari 4）。它几乎和萤火虫一样

---

console.log（）

是新的黑色--比

alert（）

好得多。我使用了一些工具：，Firebug和Visual Studio。我听说InternetExplorer8有一个很好的内置调试器。

从Firebug和IE调试器开始

但是要小心JavaScript中的调试器。每隔一段时间，它们就会对环境产生影响，足以导致您试图调试的一些错误

示例：

对于InternetExplorer来说，这通常是一个逐渐放缓的过程，是某种内存泄漏类型的交易。大约半小时后，我需要重新启动。这似乎是相当正常的

---

对于Firebug来说，它可能已经超过一年了，所以它可能是一个更老的版本。因此，我不记得具体细节，但基本上代码没有正确运行，在尝试调试一段时间后，我禁用了Firebug，代码运行良好。

我以前一直使用，直到InternetExplorer8问世。我不是InternetExplorer的超级粉丝，但在花了一些时间使用内置的开发工具（包括一个非常好的调试器）之后，使用其他工具似乎毫无意义。我必须向微软致敬，他们在这个工具上做得非常出色

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

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

• InternetExplorer8（开发工具-F12）。其他任何东西在InternetExplorer领域都是二流的
• Firefox和。点击F12显示
• Safari（显示菜单栏，首选项->高级->显示开发菜单栏）
• Google Chrome JavaScript控制台（F12或（Ctrl+Shift+J））。大部分浏览器与Safari相同，但Safari比IMHO更好
• Opera（工具->高级->开发人员工具）

---

与大多数答案一样，这取决于：您试图通过调试实现什么？基本开发，解决性能问题？对于基本发展，前面的所有答案都是足够的

特别是对于性能测试，我推荐Firebug。能够分析哪些方法在时间上是最昂贵的，这对于我参与的许多项目来说都是非常宝贵的。随着客户端库变得越来越健壮，客户端承担的责任也越来越大，这种类型的调试和分析只会变得更加有用

Firebug控制台API：

尽管

警报（msg）适用于那些“我只想知道发生了什么”的场景每个开发人员都遇到过这样的情况，即您最终会陷入一个无法摆脱的循环（非常大或无穷无尽）

我建议在开发过程中，如果您想要一个非常直观的调试选项，请使用一个可以让您突破的调试选项。（PS Opera、Safari？和Chrome？都在其本机对话框中提供此功能）

有了上述功能，您可以进入一个弹出调试的大循环，按Enter/Ok可以跳转每一条消息，但按Escape/Cancel可以很好地跳转。
除了使用Visual Studio的JavaScript调试器外，我还编写了自己的简单面板，包括在页面中。这就像VisualStudio的功能一样。我可以更改变量的值、调用函数和查看变量的值。它只计算在文本字段中编写的代码。
我正在使用的是一个用于应用程序的JavaScript调试器。
如果您正在使用，只需放入
调试器位于要调试的代码上方。在执行过程中，控件将在该位置暂停，您可以从此处开始逐步调试。
我使用旧的good
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的堆栈跟踪（包括文件路径和行号！！）

%o
和
新错误（）

有了这些功能强大的工具，您可以假设JS中出了什么问题，将调试输出（不要忘记在
if
语句中包装以减少数据量）放入并验证您的假设。修复问题或作出新假设，或将更多调试输出放入位问题

对于堆栈跟踪，还应使用：

console.trace();

照我说的

快乐的黑客
 所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。相关技术网页将介绍这些技术的详细信息。我个人喜欢在Firefox中调试JavaScript。我并不是说Firebug比其他任何东西都好；这取决于你的个人喜好，你可能无论如何都应该在所有浏览器中测试你的网站（我个人的第一选择总是Firebug）

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

火狐
Firefox自带了自己的内置JavaScript de
console.trace();

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