DevTools (Web Inspector)

There is no single best browser; they are all kind of differently bad, in different ways.

Chrome DevTools
We’ll be using these.
Safari Web Development Tools
Got some long-overdue love in Sonoma, but little since.
Firefox DevTools User Docs
Spiritual successor to Firebug, the first suite.

Many developers use Chrome for its popularity, before testing in other browsers. It also arguably has the most robust set of DevTools—though Safari and Firefox have their own versions, too. Much of this is just preference, but ultimately you’ll want to see what your visitors are seeing.

You have always been able to View Source, from the earliest days /browsers—remember that the open web has always trafficked in source code. But we’ll use DevTools for the same reason we use an IDE—more comfortable ergonomics, specifically around building for the web.

You’ll often hear people (Michael) call it the Web Inspector, or just The Inspector. It’s going to be your best (Web) friend, showing you everything that the browser has parsed to display your pages.

Inspecting Pages #

In Chrome, you can bring them up by right-clicking on any element/part of a page and clicking Inspect :

You can also hit ⌘ ~ Ctrl ⌥ ~ Alt I .

By default, you’ll see the tools open on the right side of the page. Depending on how big your screen is, they might be laid out a bit differently—but the basics are usually the same:

The Customize ⋮ button will let you change the side they appear on, or undock the tools out entirely into a separate window—sometimes easier on a laptop/small screen:

Elements Panel #

The top part of the tools is the DOM‍—you can expand/collapse all the nested HTML elements on the opened page.

The first ↖ button in the upper-left lets you mouse over on the page, and will then show you that element nested/hierarchically within the DOM.

The second ◲ button (more about this below) toggles the Device Toolbar, a.k.a. “responsive mode.”

The flex / grid badges toggle their layout overlays on the page.

Handy tip: ⌘ ~ Ctrl F in here will let you search for elements or text by name/class/contents!

Styles Tab #

The area below is for the styles. It shows whatever CSS properties apply to the element you have selected above, in the DOM/Elements panel.

These are ordered (somewhat unintuitively) in a more-specific, reverse-cascade sequence—inline styles at the top, external and internal stylesheets, then user-agent styles at the bottom—with any cascading/conflicting rules crossed out, as you go down.

On the right, you can see the sum Computed (or rendered) values of all the rules that apply—regardless of where they come from. These represent exactly what the browser is showing to you for the selected element.

You can type specific CSS properties/values into both Filter boxes to quickly narrow things down!

You can make changes in Elements or Styles, and the edits will be immediately visible on the page as if you had edited the source files. It’s useful to try things out quickly‍—or diagnose where problems/conflicts arise.

Device Mode #

Enter device mode with the little phone/laptop ◲ button, in the upper left of the DevTools:

Be sure to refresh with ⌘ ~ Ctrl R if the page doesn’t rescale correctly when you enter this mode! They sometimes don’t, depending on how they are built—especially with JS shenanigans. — Be sure to *refresh* with `⌘ ~ Ctrl` `R` if the page doesn’t rescale correctly when you enter this mode! They sometimes don’t, depending on how they are built—especially with JS shenanigans.

Generally, use the Responsive mode that lets you type in specific pixel dimensions for width/height. Or you can use the divided bar underneath to quickly jump through common/ballpark widths.

The Preview Zoom also allows you to approximate views larger than your current screen! You can specify larger dimensions, and it will scale down to show the entire viewport. This is great for developing on a laptop‍—it won’t be precise, but it’ll give you some idea of big screens.

Remember that you are not targeting specific devices here‍—you are looking for when your design/content breaks!

The Device List is… ancient and inaccurate—they don’t account for the browser’s own interface, so they are all too tall! — The *Device List* is… *ancient* and inaccurate—they don’t account for the browser’s own interface, so they are all too tall!