How to use the Chrome Inspector and Debugger

The Chrome Web Inspector and Debugger are conveniently built-in with Chrome. You can launch it by hitting F12 while in your browser or by right clicking on a web page and selecting the Inspect menu item. The images below show a few different views that you'll see in the Chrome DevTools browser.

Chrome DevTools Source Tab

In Chrome's Inspector, you'll see a tab that shows all of your source files in the current directory, relative to the file path you have in your browser's file path (where URL's are). Below is a screenshot that is similar to what you would see when clicking on this aboutme.html page.

Chrome DevTools view

Modifying the HTML in the Browser (Elements Tab)

One handy way to quickly test the effects of changing HTML tags is to edit the HTML directorly in the browser. When clicking on the "Elements" Tab in Chrome, you can do so by right-clicking on the HTML you're looking at and choosing the option to edit HTML. Then the HTML will be editable - after making any changes (new tags, changing tags, etc.) you should see the effects on your page immediately! But know if you refresh the page, these changes will go away.

Editing HTML in Chrome

Modifying the CSS in the Browser (Elements Tab)

In addition to being able to view/modify HTML in the browser, you can also edit styles on the page. This is especially helpful when testing different color combinations, fonts, layout methods, etc. You will likely find the styles pane especially useful in this class! In Chrome and many other browsers, the "Styles" pane offers auto-complete features so you can learn more about different style attributes without referring to Google so often.

Editing CSS in Chrome

Debugging JS code in Chrome

Chrome's Web Inspector debugger can set breakpoints, step through code, examine values (Sources tab)

The interaction pane for typing in arbitrary JS expressions (Console tab; Sources tab with code and variable views)

Chrome JS Debugging (start)

Debugging in Progress

Chrome debugging finished

Debugging Finished

Chrome debugging finished

Debugging Checklist

  • Are you sure the browser is even loading your JS file at all?
    Put an alert at the top of it and make sure it appears.
  • When you change your code, do a full browser refresh (Shift-Ctrl-R)
  • Check bottom-right corner of Chrome console panel for syntax errors ->
  • Paste your code into our JSLint tool to find problems.
  • Type some test code into Chrome's console or use a breakpoint.
Chrome JS error

Final Words on Using Your Browser Development Tools

As you may find, there are many features offered by browser development tookits. Don't worry about understanding all of them - many you won't need to use in this class, and we'll introduce the ones that are helpful when we learn how to integrate JavaScript to add behavior to our webpages.

For now, focus on getting familiar with the Elements and Styles panes, and play around a bit! You may find some neat CSS styles along the way. Or try playing around with the JS debugger!

The more you use these tools the more comfortable you will feel with them!

Firefox Developer Tools

As a note, Firefox, Safari and other browsers have similar tools. Please see the associated documentation for those browsers' tools for more information.