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
- (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 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.
Sources tab of Google Chrome developer tools
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.
- 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
Script tab of Internet Explorer F12 Developer Tools