By Canavar

2009-06-12 18:49:40 8 Comments

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


@Liam 2013-10-27 21:06:40

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.

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


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.

Once Firebug is installed you can access it like below:

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

Inspect Element in Firebug

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

Firebug pane

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

Script tab

Obviously, to debug you need to click reload:

JavaScript in the sctipt tab

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:

Adding breakpoints

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

A breakpoint being hit

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

Watch varibables

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


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.

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.

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.

@Christian Ternus 2013-10-27 21:08:49

... You must have had that in a copy-paste buffer ready to go, right? :)

@Liam 2013-10-27 21:14:58

@Christian Ternus 2013-10-27 21:17:49

Sorry, I totally missed that it was being asked and answered by the same person! I thought you had some sort of Javascript Debug Copypasta you put in every time someone asked this question.

@gavenkoa 2013-10-22 07:51:08

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

Look to magic %o:

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

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

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!!).

Both %o and new Error().stack available in Chrome and 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.

Also for stack traces use:


as say Console

Happy hacking!

@Saurabh Patil 2014-03-19 00:04:12

+1 for console.trace(); Different answer from the rest.

@Reza 2015-06-02 07:48:53

By pressing F12 web developers can quickly debug JavaScript code without leaving the browser. It is built into every installation of 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.

@Reza 2015-06-02 08:00:25

please see this link: too

@Ken 2009-06-12 19:13:02

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.

@J. Polfer 2010-08-12 21:38:29

+1 - Incredibly useful when you can't actually use a debugger.

@Thirisangu Ramanathan 2015-05-27 10:23:23

@Ken Link broken :(

@Ken 2015-05-27 12:09:56

@Thirisangu Thank you! Link fixed

@Suresh Mahawar 2014-08-28 14:31:42

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.

For example:

Suppose this is your test.js file

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
  • 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.

@1.21 gigawatts 2018-01-27 23:52:00

On Safari it sometimes works and sometimes doesn't. I'm sure it's some thing on my end. FWIW I have enabled Automatically Show Web Inspector for JSContexts.

@Estefany Velez 2012-07-18 03:36:13

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.

@Ryan Oberoi 2009-06-12 18:51:03

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

@Annika Backstrom 2009-06-12 18:51:38

Link it up:

@Ryan Florence 2009-06-12 19:00:35

I like firebug, but I wouldn't claim it to be head and shoulders above webkit's inspector.

@James 2009-06-12 19:12:31

Firebug was ahead of it's time when it came out, but I don't think it stands as the best tool, given other tools that have come out recently.

@Julio Greff 2009-06-12 20:23:19

I'm using Firebug since I discovered it, and it helps me a lot! console.debug, profiler, inspector...

@Gdgames Gamers 2017-01-31 17:59:19

@NinaScholz Now all browsers come with jetpacks by default !

@Chris Brandsma 2009-06-12 19:35:04

  • Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
  • Firefox and Firebug. Hit F12 to display.
  • Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
  • Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)). Mostly the same browser as Safari, but Safari is better IMHO.
  • Opera (Tools -> Advanced -> Developer Tools)

@Gabriel Solomon 2009-06-15 07:10:32

+1 opera js debugger gives a better error message then all the rest

@scunliffe 2014-03-19 13:13:10

Although in 2009 Safari might have edged out Chromes developer tools in 2014 I would take debugging in Chrome over Safari any day of the week. Chrome's Developer tools and Firefox's Firebug are top notch... and although awkward to use still IE11's dev tools are probably in 3rd place (IMHO)

@scunliffe 2009-06-12 20:19:52

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)

//global flag
_debug = true;
function debug(msg){
    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.

@mxfh 2014-02-12 00:25:58

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.

Also supports:

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

@kuy 2009-06-13 14:54:19

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

@Canavar 2009-06-13 08:08:39

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.

@Rob Lund 2009-06-12 19:11:22

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.

@shapr 2009-06-18 14:50:41

Doesn't jQuery have similar functionality?

@James 2009-06-12 19:09:14

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.

@Gavin 2009-06-12 19:44:27

For basic debugging, the IE8 debugger has suited most of my needs. However, if you are doing any sort of performance testing, you will quickly find IE lacking. I had a project recently that utilized some heavy javascript, and we really needed to trim things down for inferior systems, as we were running into the dreaded "unresponsive script error". Firebug was invaluable in this instance, because I was able to run the console.profile() method to figure out where all of my time was being spent.

@James 2009-06-12 19:59:20

The IE8 debugger also has a profile feature (albeit not as graphical as FireBug) that provides call tree, call count and time spent on each method. I've found this adequate in isolating which JS code is taking too long.

@Tom Hubbard 2009-06-12 18:59:22

Start with Firebug and 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.


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.

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.

@d34dIO 2009-06-12 18:58:58

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

@Thomas L Holaday 2009-06-12 19:18:35

By "Fiddler" do you mean Fiddler Web Debugger?

@Ryan Florence 2009-06-12 18:56:58

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

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

@Liam 2013-10-28 11:22:41

If you put console.log all over you code, remember to remove them as it will break IE.

@JohnFx 2009-06-12 18:56:36

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.

@J.W. 2009-06-12 18:52:21

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

Of course, Firebug is good if you use Firefox.

@Gavin 2009-06-12 19:46:38

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 Console API:

Related Questions

Sponsored Content

53 Answered Questions

[SOLVED] Create GUID / UUID in JavaScript?

  • 2008-09-19 20:01:00
  • Jason Cohen
  • 1490917 View
  • 3658 Score
  • 53 Answer
  • Tags:   javascript guid uuid

38 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

26 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

32 Answered Questions

[SOLVED] What's the difference between using "let" and "var"?

79 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5719373 View
  • 7116 Score
  • 79 Answer
  • Tags:   javascript arrays

54 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

Sponsored Content