如何调试JavaScript代码?

When I find that I have a problematic code snippet, how should I go about debugging it?

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

20 个解决方案

#1

Firebug is one of the most popular tools for this purpose.

Firebug是最流行的工具之一。

#2

All modern browsers come with some form of a built-in JavaScript debugging application. The details of these will be covered on the relevant technologies web pages. My personal preference for debugging JavaScript is Firebug in Firefox. I'm not saying Firebug is better than any other; it depends on your personal preference and you should probably test your site in all browsers anyway, but my first, personal, first choice is always Firebug.

所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。这些细节将在相关技术网页上介绍。我个人对调试JavaScript的偏好是Firefox中的Firebug。我不是说Firebug比其他的更好;这取决于你的个人喜好，无论如何你应该在所有的浏览器中测试你的网站，但是我个人的第一选择总是Firebug。

I'll cover some of the high-level solutions below, using Firebug as an example:

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

Firefox

Firefox comes with with its own inbuilt JavaScript debugging tool, but I would recommend you install the Firebug add on. This provides several additional features based on the basic version that are handy. I'm going to only talk about Firebug here.

Firefox自带内置的JavaScript调试工具，但是我建议您安装Firebug。这提供了一些基于基本版本的附加特性，这些特性非常方便。我只讲Firebug。

Once Firebug is installed you can access it like below:

一旦安装了Firebug，您可以如下方式访问:

Firstly if you right click on any element you can Inspect Element with Firebug:

首先，如果你右键点击任何元素，你可以用Firebug检查元素:

Clicking this will open up the Firebug pane at the bottom of the browser:

点击它将打开浏览器底部的Firebug窗格:

Firebug provides several features but the one were interested in is the script tab. Clicking the script tab opens the below window:

Firebug提供了几个特性，但其中一个感兴趣的是script选项卡。单击“脚本”选项卡，将打开以下窗口:

Obviously, to debug you need to click reload:

显然，要调试，需要单击reload:

You can now add breakpoints by clicking the line to the left of the piece of JavaScript code you want to add the breakpoint to:

现在，您可以通过单击要添加断点的JavaScript代码左边的一行来添加断点:

When your breakpoint is hit, it will look like below:

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

You can also add watch variables and generally do everything that you would expect in a modern debugging tool.

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

For more information on the various options offered in Firebug, check out the Firebug FAQ.

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

Chrome

Chrome also has its own in built JavaScript debugging option, which works in a very similar way, right click, inspect element, etc.. Have a look at Chrome Developer Tools. I generally find the stack traces in Chrome better than Firebug.

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

Internet Explorer

If your developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.

如果您在。net中开发并使用Visual Studio使用web开发环境，您可以通过放置断点等直接调试JavaScript代码。NET代码。

If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the right click inspect element features of Chrome or Firefox, you access the developer tools by pressing F12. This question covers most of the points.

如果没有，Internet Explorer还提供上面所示的所有工具。让人恼火的是，你没有点击右键查看Chrome或Firefox的元素特性，而是通过按F12来访问开发工具。这个问题涵盖了大部分要点。

#3

• Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
• Internet Explorer 8(开发人员工具- F12)。在ie浏览器领域，其他任何东西都是二流的
• Firefox and Firebug. Hit F12 to display.
• Firefox和Firebug。按F12显示。
• Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
• Safari(显示菜单栏，首选项->高级->显示开发菜单栏)
• Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)). Mostly the same browser as Safari, but Safari is better IMHO.
• 谷歌Chrome JavaScript控制台(F12或(Ctrl + Shift + J))。大多数浏览器和Safari差不多，但是Safari更好。
• Opera (Tools -> Advanced -> Developer Tools)
• Opera(工具->高级->开发工具)

#4

There is a debugger keyword in JavaScript to debug the JavaScript code. Put debugger; snippet in your JavaScript code. It will automatically start debugging the JavaScript code at that point.

JavaScript中有调试JavaScript代码的调试器关键字。调试器;JavaScript代码中的代码片段。它会自动开始调试JavaScript代码。

For example:

例如:

Suppose this is your test.js file

假设这是你的测试。js文件

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

• When the browser runs the web page in developer option with enabled debugger, then it automatically starts debugging from the debugger; point.
• 当浏览器使用启用调试器在developer选项中运行web页面时，它会自动从调试器开始调试;点。
• There should be opened the developer window the browser.
• 应该打开开发人员窗口的浏览器。

#5

I use old good printf approach (an ancient technique which will work well in any time).

我使用旧的好printf方法(一种古老的技术，在任何时候都可以很好地工作)。

Look to magic %o:

看魔法% o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%o dump clickable and deep-browsable, pretty-printed content of JS object. %s was shown just for a record.

%o转储可点击的、可深入浏览的、漂亮打印的JS对象内容。%s仅显示为一个记录。

And this:

这:

console.log("%s", new Error().stack);

gives you Java-like stack trace to point of new Error() invocation (including path to file and line number!!).

提供类似java的堆栈跟踪到新Error()调用的点(包括文件的路径和行号!)

Both %o and new Error().stack available in Chrome and Firefox.

%o和新错误()。可在Chrome和Firefox中使用堆栈。

With such powerful tools you make assumption whats going wrong in your JS, put debug output (don't forget wrap in if statement to reduce amount of data) and verify your assumption. Fix issue or make new assumption or put more debug output to bit problem.

使用如此强大的工具，您可以假设您的JS中出了什么问题，然后放入调试输出(不要忘记封装if语句以减少数据量)并验证您的假设。修复问题或作出新的假设，或将更多的调试输出放入位问题。

Also for stack traces use:

对于堆栈跟踪的使用:

console.trace();

as say Console

是说控制台

Happy hacking!

黑客快乐!

#6

Start with Firebug and IE Debugger.

从Firebug和IE调试器开始。

Be careful with debuggers in JavaScript though. Every once in a while they will affect the environment just enough to cause some of the errors you are trying to debug.

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

Examples:

例子:

For Internet Explorer, it's generally a gradual slowdown and is some kind of memory leak type deal. After a half hour or so I need to restart. It seems to be fairly regular.

对于Internet Explorer来说，这通常是一个逐渐放缓的过程，是一种内存泄漏类型的处理。半小时后，我需要重新开始。这似乎很有规律。

For Firebug, it's probably been more than a year so it may have been an older version. As a result, I don't remember the specifics, but basically the code was not running correctly and after trying to debug it for a while I disabled Firebug and the code worked fine.

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

#7

Although alert(msg); works in those "I just want to find out whats going on" scenarios... every developer has encountered that case where you end up in a (very large or endless) loop that you can't break out of.

虽然警报(味精);在那些“我只是想知道发生了什么”的场景中。每个开发人员都遇到过这样的情况:您最终进入了一个(非常大的或无穷无尽的)循环，您无法摆脱它。

I'd recommend that during development if you want a very in-your-face debug option, use a debug option that lets you break out. (PS Opera, Safari? and Chrome? all have this available in their native dialogs)

我建议在开发过程中，如果您想要一个非常适合您的调试选项，可以使用一个调试选项让您跳出来。(PS歌剧,狩猎吗?和Chrome吗?所有这些都可以在它们的本地对话框中找到)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

With the above you can get your self into a large loop of popup debugging, where pressing Enter/Ok lets you jump through each message, but pressing Escape/Cancel lets you break out nicely.

有了上面的内容，您可以让自己进入一个弹出式调试的大循环，按Enter/Ok允许您跳过每个消息，但是按Escape/Cancel可以让您很好地跳出来。

#8

I use WebKit's developer menu/console (Safari 4). It is almost identical to Firebug.

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

console.log() is the new black -- far better than alert().

log()是新的黑色——比alert()好多了。

#9

My first step is always to validate the HTML and to check syntax with JSLint. If you have clean markup and valid JavaScript code then it is time for Firebug or another debugger.

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

#10

Visual Studio 2008 has some very good JavaScript debugging tools. You can drop a breakpoint in your client side JavaScript code and step through it using the exact same tools as you would the server side code. There is no need to attach to a process or do anything tricky to enable it.

Visual Studio 2008有一些非常好的JavaScript调试工具。您可以在客户端JavaScript代码中删除一个断点，并使用与服务器端代码完全相同的工具对其进行处理。没有必要附加到一个进程或做任何棘手的事情来启用它。

#11

I use a few tools: Fiddler, Firebug, and Visual Studio. I hear Internet Explorer 8 has a good built-in debugger.

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

#12

I used to use Firebug, until Internet Explorer 8 came out. I'm not a huge fan of Internet Explorer, but after spending some time with the built-in developer tools, which includes a really nice debugger, it seems pointless to use anything else. I have to tip my hat to Microsoft they did a fantastic job on this tool.

我以前用Firebug，直到ie8出现。我不是Internet Explorer的铁杆粉丝，但在花了一些时间使用内置的开发工具(其中包括一个非常好的调试器)之后，使用其他任何工具似乎都毫无意义。我得向微软致敬，他们在这个工具上做得很出色。

#13

You might also check out YUI Logger. All you have to do to use it is include a couple of tags in your HTML. It is a helpful addition to Firebug, which is more or less a must.

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

#14

I found the new version of Internet Explorer 8 (press F12) is very good to debug JavaScript code.

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

Of course, Firebug is good if you use Firefox.

当然，如果您使用Firefox, Firebug是很好的。

#15

Besides using Visual Studio's JavaScript debugger, I wrote my own simple panel that I include to a page. It's simply like the Immediate window of Visual Studio. I can change my variables' values, call my functions, and see variables' values. It simply evaluates the code written in the text field.

除了使用Visual Studio的JavaScript调试器，我还编写了自己的简单面板，并将其包含到页面中。它就像Visual Studio的直接窗口。我可以改变变量的值，调用函数，看到变量的值。它只计算文本字段中所写的代码。

#16

I'm using Venkman, a JavaScript debugger for XUL applications.

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

#17

In addition to Firebug and browser-native developer extensions JetBrains WebStorm IDE comes with remote debug support for Firefox and Chrome (Extension required) built in.

除了Firebug和浏览器本地开发扩展之外，JetBrains WebStorm IDE还内置了Firefox和Chrome(需要扩展)的远程调试支持。

Also supports:

还支持:

• coffescript: how to debug coffeescript in node.js with webstorm 6 source maps
• coffescript:如何在node中调试coffeescript。带有webstorm 6源地图的js
• node.js
• node . js

Options to test this for free are the 30 trial or using an Early Access Version.

免费测试的选项是30试用版或使用早期访问版本。

#18

If you are using Visual Studio, just put debugger; above the code you want to debug. During execution the control will pause at that place, and you can debug step by step from there on.

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

#19

As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.

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

For performance testing specifically, I recommend Firebug. Being able to profile which methods are the most expensive in terms of time has been invaluable for a number of projects I have worked on. As client-side libraries become more and more robust, and more responsibility is placed client-side in general, this type of debugging and profiling will only become more useful.

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

Firebug Console API: http://getfirebug.com/console.html

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

#20

By pressing F12 web developers can quickly debug JavaScript code without leaving the browser. It is built into every installation of Windows.

通过按F12, web开发人员可以在不离开浏览器的情况下快速调试JavaScript代码。它被嵌入到Windows的每个安装中。

In Internet Explorer 11, F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console for messages and immediate code execution.

在Internet Explorer 11中，F12工具提供调试工具，如断点、监视和本地变量查看，以及消息控制台和即时代码执行。