Recently while researching some issues I realized that a number of developers don’t know about the browser tools that can make JavaScript debugging easier than ever. When I first started cutting my teeth on JavaScript, the easiest way to figure out what wasn’t working was a lot of alert statements with output.   Now modern browsers have built in tools and plugins that allow true step through debugging and a console for output of errors that can quickly point you to the bugs that are vexing you. Internet Explorer, Chrome and Firefox all have built in Developer tools now that will assist you with both JavaScript and HTML/CSS debugging (Opera has one as well called Dragonfly).

My personal choice when it comes to tracking down issues and debugging is the Firebug plugin for Firefox. For the most part it’s a flavor preference since all of the built in tools are fairly robust and it is a tool I have been using since before the built in features were as useful.

HTML Inspection

Firebug DOM Inspection

As you can see in the screen capture Firebug has a fairly simple interface and selection tool for finding objects in the DOM and the CSS that applies. This can be a bit of a god send when trying to track down colors a user wants to copy or find where a random CSS feature is being set via the source notes under the applied styles. Always helpful when trying to look into another developer or designers code and trying to locate where that one odd margin is coming from that keeps throwing everything out of alignment.

 

JavaScript Debugging

Firebug Debug Window

As with all of the other developer tools, Firebug makes it easy to set breakpoints and step through your code. At the top of the script window the file drop down allows you to easily select each of the included files or sources that contain script tags. This helps when sifting through a site that has a lot of code and includes though in some systems like SharePoint the list of includes can get a little lengthy to look through. Don’t forget about the Watch panel though in this window for reviewing currently active objects and their details.

 

JavaScript Console Log

Firebug Consol

This is probably the window I spend the largest amount of my time using when trying to debug code. The console lists all errors that get reported, usually pointing you right to what variable you mistyped. Beyond that, if you expand the run line it gives you a nice little notepad area to test out JavaScript snippets or play with the DOM currently loaded. The log also provides a great way to explore Xml return objects from web services when trying to observe the raw object structure and fields. This is always helpful when attempting to consume a new service for the first time and doesn’t require having to fire up Fiddler to capture the headers.

For further information or to learn more details about where these tools are in your browser check these links:

 

Like this post? Share it!