We Keep Coding

Debugging Javascript in a proper way [duplicate]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I find that I have a problematic code snippet, how should I go about debugging it?

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

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 (my personal first choice is always Firebug).
I'll cover some of the high-level solutions below, using Firebug as an example:
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.
Once Firebug is installed you can access it like below:
Firstly if you right click on any element you can Inspect Element with Firebug:
Clicking this will open up the Firebug pane at the bottom of the browser:
Firebug provides several features but the one we're interested in is the script tab. Clicking the script tab opens this window:
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:
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.
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.
Internet Explorer
If you're 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.

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)

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

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, location.host);
%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:
console.trace();
as say Console
Happy hacking!

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

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(_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.

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

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.

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.

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

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.

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.

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.

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.

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

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:
coffescript: how to debug coffeescript in node.js with webstorm 6 source maps
node.js
Options to test this for free are the 30 trial or using an Early Access Version.

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.

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:
http://getfirebug.com/console.html

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.

Intellij IDEA, run Javascript code right in the editor

After having written large amounts of code in Intellij Idea Ultimate edition, I often want to test a method, or big pieces.
I often resort to having to paste the code in firebug in firefox, a small annoying cramping space, with no editor features. If the code needs adjusting I need to do it there, test again, copy and insert into Intellij Idea.
Is it possible to run firebug like console code, right in Intellij ? Similar to in Java debug mode with the Inspect tool ? It would have been really useful, even more useful just to highlight some code and press run.
Browser support is not important, any browser will do.
Is this possible already? Is there an Intellij plugin for this? Why not? :(
Thanks!

If the browser is not important, you could use the node.js plugin as a javascript repl / debugger. Keep in mind that it will not provide an HTML DOM so if your code makes jQuery calls, it will not run out of the box. Otherwise, if it's just plain javascript, it will run just fine.

Just stumbled over this. A bit late but anyway:
Debugging Javascript, editing values, etc. works fine using intelliJ with its Chrome Plugin.
See https://www.jetbrains.com/idea/webhelp/configuring-javascript-debugger.html or
http://blog.jetbrains.com/idea/2011/03/intellij-idea-debugging-javascript-in-google-chrome/
You can set breakpoints to stop where you want and can from there evaluate expressions and all the other stuff you would like to do.
Hope this is what you wanted to know.

Is there a tool out there that makes debugging JavaScript and jQuery easier?

I'm fairly inexperienced with JavaScript and jQuery, but I need both for the ASP.Net website I'm working on. I am slowly figuring it out, but I've been relying heavily on StackOverFlow.
Does anyone know of any tool (preferably free) that makes debugging JavaScript and jQuery easier? I've been using Firebug which has been helpful, but I guess I'm just spoiled by Visual Studio's debugger and intellisense. Is there anything like that for JavaScript and jQuery? It would sure make my life easier if there were.
What do you use? Any recommendations?

Of course, use the Firebug plugin for Firefox

I don't like anything Microsoft, but last time I looked at Visual Studio it was providing IntelliSense for Javascript. You may be interested in this article.
You say you're already using Firebug, which is a good start. I'd recommend also debugging in a webkit browser, such as Safari or Google Chrome. Both options have a developer console built in and it behaves much like Firebug. The beauty of jQuery is it does the dirty work of browser DOM inconsistencies between browsers, so if you have pure jQuery working in one browser, it will more than likely work in IE as well. I always make my program work in a standards compliant browser first, and then worry about IE.
IE8 also has developer tools/console or whatever they call it.

My comment can be answer
for IE it is IE developer toolbar and for chrome it has Chrome Developer toolbar. You can even use Fiddler for IE which tells about ajax calls.
Please let me know if you need any other info

In addition to Firebug, using JSLint will check and help you write good JS code.

Firebug (Firefox). The awesome thing about FireBug is that you can use CSS selectors directly in the console (see here) to test some of your jQuery selectors. You can also find lots of logging functions to use with FireBug (check out the console API)
Firebug Lite (Not as powerful as the full-featured FireBug, but great in a pinch)
Chrome Developer tools (Chrome; Safari has nearly identical tools)
IE Developer Tools when you must open IE.
window.alert
JSFiddle, which is useful for quickly coding and testing JS.

Netbeans has a pretty stupendous system from what I've seen.

I like the Web Developer addon for Firefox and other browsers. It's got an error console which is pretty handy.

Breakpoints in Ruby IDE?

I currently use TextMate for Ruby/Javascript/Actionscript development and it is amazing. But one thing I would really love to use are breakpoints so I could stop code execution and examine the state of the variables and walk through the code. Something like what Flex Builder does.
Does TextMate have this capability? Or what do you use to do breakpoints and that sort of thing with Ruby? How about for Javascript too?
Thanks!

Since TextMate is not an IDE but just a text editor (on steroids though!) I believe this is something totally not supported.
As for the javascript, this is something you can do with firebug (at least for firefox) and similar tools are included (or can be found) for IE, Chrome and Safari :)

There are 3 mostly-Java IDEs that run under Mac OS X yet do a good job of developing (and of course debugging) Ruby.
Eclipse, with the Aptana plugin;
IntelliJ IDEA (it knows lots of programming languages)
NetBeans (I think).
All three are free (even IntelliJ, they have an Open Source edition out now), so you can just download, play around with it, get accustomed and go to town.

Eclipse with the Dynamic Languages Toolkit supports Ruby debugging. I have used it in the past, and it supports Javascript as well.

TextMate is an editor and not a full-blown IDE, so it doesn't support debugging.
If you're looking for a Ruby IDE, I highly recommend RubyMine. It's got great support for debugging, running tests, easily navigating between files, and basic refactoring. Admittedly it's a lot more heavyweight, so I tend to use it for major work (or when getting up to speed on an existing code base), and still use TextMate for quick changes.
There are some open source solutions as well. In the past I've used NetBeans and RadRails, and particularly NetBeans has worked very well for me, too. Not as good as RubyMine, but well worth checking out if you're on a budget.
I should also point out that you can debug Ruby apps from the command line, using the ruby-debug gem. Basically, you place a debugger call into your code to set a breakpoint, and then run the app with rdebug instead of ruby. Check out this article for an overview.

arcadia is a ruby editor written in ruby with ruby debugging support. A little rough still, but at least you get the good feeling of running ruby :)
-r

debugging javascript for IE6

firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..

You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.

You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.

The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.

"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.

or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.

For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger

I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.

I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.