Debugging in the Browser

If you’re new to Web development, I highly recommend learning how to use a few different browser’s developer tools. I came from a background of mostly Java, and learning javascript can be tricky since it is used is such a different way. I used Chrome’s developer tools to learn how javascript behaves. I think it would have been much more difficult to learn javascript without using the dev tools, so you should learn how to use them too! I will mostly focus on Chrome’s tools since I’m most familiar with them, but Firebug (http://getfirebug.com) has a similar debugger for Firefox. But I think Chrome’s tools are prettier, which is why I use them!

Elements Tab

To access Google Chrome developer tools, right click on the element on the page that you want to see the HTML of (or anywhere if you just want to open the tools) and select Inspect element. This will take you to the Elements tab. Here you can see all of the HTML for a page and all CSS styles that apply to each element. Here are some uses for the Elements tab:

  • Edit HTML directly in this view by right clicking on the element you want to change and selecting Edit as HTML.
  • Notice how all of the styles that apply to the selected element are in the right sidebar of this tab.
  • Unselect styles to make them no longer apply by hovering over the style you don’t want and deselecting the checkbox next to it, or you can edit the styles by double clicking on the style you want to change.
  • If the style is crossed out, then another style has overwritten the value of that style, if the style has a yellow exclamation mark next to it then the browser doesn’t understand what it means.
  • Create new CSS selectors in the dev tools directly by clicking on the little plus sign above the Style’s section, this can be useful if you’re trying to figure out how to select a certain element.

Elements tab of Google Chrome developer tools

Sources Tab

Chrome’s javascript debugger can be found in the Sources tab of the developer tools. Here are some of the uses of the Sources tab:

  • (This is bold, because it’s important!) Before you start debugging, you should set the debugger tools to pause when there is an uncaught exception. To do this, press the stop sign in the bottom left corner with a pause symbol in the middle of it until it turns purple, then scripts will pause when there is an uncaught exception and you’ll be able to see what is causing the exception by checking the values of local variables at the point where the exception is thrown. You can also set it to pause on all exceptions, but this can be very noisy, and usually if there is a caught exception you were already aware of it.
  • To use the debugger, click on the arrow in the top left corner to see all of your javascript files. Browse through the scripts until you find the one you want to debug.
  • To set a breakpoint, click on the line number to the left of the line you want to set the breakpoint at. Once the breakpoint has been hit, there are basic stepping and running buttons in the top right corner. Another way of setting a breakpoint is to put “debugger;” directly in your code, the Chrome developer tools will recognize this as well.
  • When you are paused in the debugger, look at the right sidebar of this tab. You can see all local and global variables and their values in the Scope Variables section.
  • You can see the stack trace in the Call Stack section, and you can see all breakpoints that you have set in the Breakpoints section. The breakpoints will persist on page reload.
  • Edit javascript on the spot in the developer tools, just edit the file in the Sources tab, then Ctrl+s and the new javascript will run, but this does not persist when the page reloads. I’ve never used this functionality, mostly because you can’t make the js persist, and most of the time you want it to.

Sources tab of Google Chrome developer tools

Console Tab

The Console tab of chrome developer tools has a lot of useful features. The console is also accessible from other tabs by clicking the Show console button in the lower left corner. Here are some things you can do with the console tab:

  • To show information about the code in the console, use console.log(string) in your code, this is really useful for logging errors, or seeing how long something took to run.
  • Right click in the console and select Log XMLHttpRequests Then you can see whether your XHR requests have been successful or not directly in the console. You can also see the details of these calls in the Network tab.
  • Type the name of a variable in the console and see it’s value. You can dereference the variables you find in the console to find their fields. The console will autocomplete the variables for you showing you which variables that it knows about in the current scope.
  • Query for HTML elements in the console using jquery/dojo/whatever you use. Ex: dojo.byId(“my_object_1″); Or select the element you want to see in the Elements tab and type $0 into the console.
  • You can also execute javascript in the console, it will execute in the current scope, so if you’re paused in the debugger you can set variable values to something else in the console and see how it behaves.
  • Use the monitorEvents method, pass it an element and you’ll see all events that are being fired on that element.

Debugging in Internet Explorer

If you have a bug specific to Internet Explorer (which you probably will at one point or another), you may need to use their debugger tools. They are a little harder to use than Chrome’s tools. I do most of my internet explorer debugging by googling my problem, a lot of people have problems with IE, so try that before learning how to use their tools, I get by mostly without them.

To open Internet Explorer’s F12 developer tools, press F12. F12 developer tools allow you to change the Browser/Document mode of internet explorer so that you can see how it looks in previous versions of Internet Explorer, to do this click on Browser Mode or Document Mode and select the version you want to see. However, beware of relying totally on testing in IE9 set to IE8 mode, we once had a bug where we tested everything using the developer tools in IE9 and setting the browser and document mode to IE8, but if you were actually in IE8, you would get a really ugly error popup that said “Stack overflow”, we didn’t find this until after deploying, so I recommend you also do some testing in real IE8 before deploying anything big. To inspect HTML go to the HTML tab, press the little refresh button, then press the pointer button and click on the HTML element on the page that you want to see. CSS and HTML will be visible here. The HTML in the tab only updates once you press refresh so if you click something to change the state, you have to refresh the developer tools again.

HTML tab of Internet Explorer F12 Developer Tools

To debug javascript, go to the Script tab, press the Start debugging button, then you’ll see one really long file with your scripts in it. The best way I’ve found to navigate this is to copy the line of javascript that you want to set your breakpoint at, and search for it in the Script tab. You should be able to find the line this way. Then you set breakpoints and step through the code with the basic debugging buttons in that tab.
Script tab of Internet Explorer F12 Developer Tools

Discussion

  • Tim Duffey

    I ran across this post today as I looking into applying for a web developer position at Redfin. I enjoyed this post because it reminded me of when I first started diving into JavaScript development about a year ago. For me, coming from an ASP.NET background into pure JavaScript development was quite a shock. I used to rely heavily on Internet Explorer’s developer tools and Firebug for ASP.NET development. But once I got into pure JavaScript development, I found Internet Explorer’s JavaScript debugging to be unhelpful and cumbersome. Firebug was a little better, but it too was somewhat cumbersome. I have since switched over to Chrome’s developer tools for most of my JavaScript debugging needs (other than the occasional browser specific bug) and have not looked back.

  • Ricardo Carvalho

    Very good blog, great information, the site Scriptcase you find good stories too.

  • Justin

    Hello, you can use IE Developer specifically for IE6 and IE7. HTTPWatch is a good substitute for LiveHTTPHeaders for these old browsers as well.