如何调试我的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提供了几个功能,但其中一个感兴趣的是脚本选项卡。单击脚本选项卡将打开以下窗口:

Obviously, to debug you need to click 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常见问题解答。

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.

如果您使用Web开发环境在.NET中进行开发并使用Visual Studio,则可以通过放置断点等直接调试JavaScript代码。您的JavaScript代码与调试C#或VB.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)。 Internet Explorer中的其他任何东西都是二流的

• 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.

Google 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

假设这是你的test.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.

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

• 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.

%和新的Error()。堆栈在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 Debugger开始。

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.

虽然警报(msg);适用于那些“我只是想了解最新情况”的情况......每个开发人员都遇到过这种情况,你最终会遇到一个你无法突破的(非常大的或无限的)循环。

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 Opera,Safari?和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().

console.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。我听说Internet Explorer 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,直到Internet Explorer 8问世。我不是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:如何使用webstorm 6源映射调试node.js中的coffeescript

• 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 Console 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工具提供调试工具,如断点,监视和本地变量查看,以及用于消息和即时代码执行的控制台。