Inspecting the Web with Chrome's DevTools

We will learn how to use the Chrome DevTools to debug webpages and, by doing so, gain a better understanding of how the Web (and computers) work, as well as gain experience in using an invaluable tool for web-scraping and other programming.

Lessons so far:

Other references:

TK: More text about what's going on in these instructions:

Opening the DevTools Panel

You can open the DevTools by going to the menu and selecting View -> Developer -> Developer Tools.

Or better yet, use the keyboard shortcut:

PC: Ctrl+Shift+I / Mac: Cmd+Opt+I


Go horizontal

Usually by default, the panel will open up vertically. This isn't an ideal layout for most web debugging tasks, so click-and-hold the layout icon (in the top right of the DevTools Panel's menubar) to see the horizontal-layout option.



There's also a pop-out option, which is what I normally use. For the purposes of the animated-GIF-screencasts in these tutorials, I stick to the horizontal layout.


The menubar

The menubar contains three menu items that we care about:

  • Elements
  • Network
  • Console


Disabling the cache

By default, your web browser saves copies of webpages and their files to a cache on your hard drive, so that when you visit next time, the browser reads from the cache, which is much faster than re-fetching the files across the Internet.

However, we don't want that convenience, at least for the purposes of debugging the browser operations. So click the little Gear icon on the DevTools menubar and select the Disable cache option.