如何调试JavaScript代码?[关闭]


Answers:


78

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



7
我喜欢萤火虫,但我不会声称它是webkit检查员的头和肩膀。
Ryan Florence

2
Firebug在它问世之前就已经领先了,但考虑到最近出现的其他工具,我认为它并不是最好的工具。
詹姆斯

自发现Firebug以来,我就一直在使用它,它对我有很大帮助!console.debug,探查器,检查器...
Julio Greff

@NinaScholz现在所有浏览器默认都带有jetpacks!
oneCoderToRuleThemAll

74

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

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

火狐浏览器

Firefox带有自己的内置JavaScript调试工具,但是我建议您安装Firebug插件。这提供了一些方便的基于基本版本的附加功能。我只在这里谈论Firebug。

安装Firebug后,您可以按以下方式进行访问:

首先,如果您右键单击任何元素,则可以使用Firebug检查元素

在Firebug中检查元素

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

萤火虫窗格

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

脚本选项卡

显然,要调试,您需要单击reload

sctipt选项卡中的JavaScript

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

添加断点

当您的断点被击中时,它将如下所示:

断点被击中

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

观看变量

有关Firebug中提供的各种选项的更多信息,请查看Firebug FAQ

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

IE浏览器

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

如果您没有此功能,Internet Explorer还将提供上面显示的所有工具。烦人的是,您没有按右键检查 Chrome或Firefox的元素功能,而是通过按F12来访问开发人员工具。这个问题涵盖了大多数要点。


...您一定已经准备好将其放在复制粘贴缓冲区中,对吗?:)
Christian Ternus


3
抱歉,我完全错过了同一个人提出和回答的问题!我以为您每次有人问这个问题时都会放入某种Javascript Debug Copypasta。
克里斯蒂安·特努斯

54
  • Internet Explorer 8(开发人员工具- F12)。其他一切都是Internet Explorer的第二流
  • Firefox和Firebug。点击F12显示。
  • Safari(显示菜单栏,首选项 -> 高级 -> 显示开发菜单栏)
  • Google Chrome JavaScript控制台(F12或(Ctrl+ Shift+ J))。大多数浏览器与Safari相同,但是Safari更好,恕我直言。
  • Opera(工具 -> 高级 -> 开发人员工具

+1 Opera js调试器给出了比其他所有方法更好的错误消息
Gabriel Solomon

3
尽管Safari在2009年可能会在2014年淘汰Chromes开发人员工具,但我还是会在一周的任何一天通过Safari在Chrome中进行调试。Chrome的开发人员工具和Firefox的Firebug是一流的……虽然仍然难以使用IE11的开发工具,但排名第三(IMHO
scunliffe 2014年

29

JavaScript中有一个debugger关键字,用于调试JavaScript代码。放调试器;您的JavaScript代码中的代码段。此时它将自动开始调试JavaScript代码。

例如:

假设这是您的test.js文件

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();
  • 当浏览器在启用了调试器的情况下在Developer选项中运行网页时,它将自动从调试开始调试点。
  • 应该打开浏览器的开发人员窗口。

在Safari上,它有时可以工作,有时却不能。我确定这是我的事。FWIW我为JSContexts启用了“自动显示Web检查器”。
1.21吉瓦

21

我使用的是旧的好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()调用点(包括文件路径和行号 !!)。

双方%onew Error().stack在Chrome和Firefox提供。

使用如此强大的工具,您可以假设JS出了什么问题,调试输出(不要忘记包装if语句以减少数据量)并验证您的假设。解决问题或做出新的假设,或将更多调试输出转换为位问题。

也可用于堆栈跟踪:

console.trace();

控制台

骇客骇客!


2
为console.trace()+1;与其他人的答案不同。
2014年

12

从Firebug和IE Debugger开始。

不过,请谨慎使用JavaScript中的调试器。它们每隔一段时间就会影响环境,足以引起您要调试的某些错误。

例子:

对于Internet Explorer,它通常是逐渐降低的速度,并且是某种形式的内存泄漏类型。半个小时左右后,我需要重新启动。这似乎很正常。

对于Firebug,可能已经超过一年了,所以它可能是一个较旧的版本。结果,我不记得具体细节,但是基本上代码没有正确运行,并且在尝试调试了一段时间之后我禁用了Firebug,并且代码运行正常。


9

尽管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可使您分好。



5

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


@Ken Link损坏了:(
Thirisangu Ramanathan

@Thirisangu谢谢!固定链接
肯(Ken)

3

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


3

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


“ Fiddler”是指Fiddler Web调试器吗?
Thomas L Holaday

3

我曾经使用Firebug,直到Internet Explorer 8出现。我不是Internet Explorer的忠实拥护者,但是在花了一些时间使用内置的开发人员工具(包括一个非常不错的调试器)之后,使用其他任何东西似乎毫无意义。我不得不向微软表示敬意,他们在此工具上做得非常出色。


2
对于基本调试,IE8调试器已满足我的大多数需求。但是,如果您正在进行任何类型的性能测试,您将很快发现IE缺乏。我最近有一个项目,该项目使用了一些笨拙的javascript,当我们遇到可怕的“无响应脚本错误”时,我们确实需要对劣等系统进行简化。在这种情况下,Firebug是无价的,因为我能够运行console.profile()方法来弄清楚我所有的时间都花在了哪里。
加文2009年

1
IE8调试器还具有配置文件功能(尽管不像FireBug那样图形化),可提供调用树,调用计数和每种方法所花费的时间。我发现这足以隔离哪个JS代码花费的时间太长。
詹姆斯

3

您也可以签出YUI Logger。使用它所要做的只是在HTML中包含几个标签。它是Firebug的有用补充,或多或少是必须的。


jQuery是否没有类似的功能?
shapr

2

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

当然,如果您使用Firefox ,则Firebug很好。


2

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




2

如果您使用的是Visual Studio,只需将debugger;要调试的代码放在上面。在执行期间,控件将在该位置暂停,您可以从此处逐步进行调试。


1

与大多数答案一样,它实际上取决于:您想通过调试实现什么?基本开发,解决性能问题?对于基础开发,所有先前的答案都绰绰有余。

对于性能测试,我建议使用Firebug。对于我从事的许多项目而言,能够确定哪种方法在时间上最昂贵是非常宝贵的。随着客户端库变得越来越健壮,并且一般来说,将更多的责任放在客户端上,这种类型的调试和性能分析将变得更加有用。

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.