In this lesson we'll learn

This course assumes zero prior understanding of the Chrome DevTools. So let's start at the very beginning!

Right click on a website and click Inspect or use the keyboard shortcut Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

You should get something like this!

Chrome DevTools

But... what are we looking at?


Before we had DevTools, we had source code.

View Source

And if you wanted to check the value of something, we had alert

Alert example

But if you needed to check the value of anything that wasn't primitive you would get

Alert example with an object

Let there be DOM

Hixie's Live Dom Viewer

Our first DevTool 🐞


Firebug Discontinued

Who this course is made for

Next Lesson

What can modern DevTools do? Find out in the next lesson on the next lesson