如何调试我的JavaScript代码？

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

1> Ryan Oberoi..：

---

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

---

链接起来:http://getfirebug.com/

---

我喜欢firebug,但我不会声称它是webkit检查员之上的头脑和肩膀.

---

Firebug已经领先于它出现的时间,但我不认为它是最好的工具,因为最近出现了其他工具.

2> Liam..：

---

所有现代浏览器都带有某种形式的内置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和使用Visual Studio中的Web开发环境,你可以通过设置断点,等你的JavaScript代码看起来完全一样的,如果你在调试C#或直接调试JavaScript代码VB.NET代码.

如果您没有此功能,Internet Explorer还会提供上面显示的所有工具.令人讨厌的是,您可以通过按F12访问开发人员工具,而不是使用Chrome或Firefox的右键检查元素功能.这个问题涉及大多数问题.

---

@ChristianTernus,[回答你自己的问题是完全有效的](http://meta.stackexchange.com/questions/132886/what-is-this-answer-your-own-question-jazz)

---

对不起,我完全错过了同一个人的询问和回答!我以为你每次有人问这个问题时你都会有一些Javascript Debug Copypasta.

3> Chris Brands..：

---

Internet Explorer 8(开发人员工具 - F12).Internet Explorer中的其他任何东西都是二流的

Firefox和Firebug.点击F12显示.

Safari(显示菜单栏,首选项 - > 高级 - > 显示开发菜单栏)

Google Chrome JavaScript控制台(F12或(Ctrl+ Shift+ J)).与Safari相同的浏览器,但Safari更好恕我直言.

Opera(工具 - > 高级 - > 开发人员工具)

---

虽然在2009年Safari可能在2014年淘汰了Chromes开发人员工具,但我会在一周的任何一天通过Safari在Chrome上进行调试.Chrome的开发者工具和Firefox的Firebug都是顶级的...虽然使用起来很尴尬IE11的开发工具可能排在第3位(*恕我直言*)

4> Suresh Mahaw..：

---

JavaScript中有一个调试器关键字来调试JavaScript代码.把调试; JavaScript代码中的代码段.它将在此时自动开始调试JavaScript代码.

例如:

假设这是你的test.js文件

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

当浏览器在启用了调试器的开发人员选项中运行网页时,它会自动从调试器开始调试; 点.

应该打开浏览器的开发者窗口.

5> gavenkoa..：

---

我使用旧的好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();

如控制台

快乐的黑客!

---

+1为console.trace(); 其余的答案不同.

6> Tom Hubbard..：

---

从Firebug和IE Debugger开始.

但是要小心JavaScript中的调试器.每隔一段时间它们就会影响环境,足以导致您尝试调试的一些错误.

例子:

对于Internet Explorer,它通常是逐渐减速并且是某种内存泄漏类型的交易.大约半小时后我需要重新启动.这似乎是相当规律的.

对于Firebug来说,它可能已经超过一年,所以可能是旧版本.因此,我不记得具体细节,但基本上代码没有正确运行,并且在尝试调试它一段时间后我禁用了Firebug并且代码工作正常.

7> scunliffe..：

---

虽然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> Ryan Florenc..：

---

我使用WebKit的开发人员菜单/控制台(Safari 4).它与Firebug几乎完全相同.

console.log()是新的黑色 - 远远好于alert().

---

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