Introduction

This guide is intended for absolute beginners to web development who want to learn how to use Dev Tools (in particular the element inspector). It’s most definitely not a definitive guide, but it does cover a lot of material. If you’re new and a lot of it goes over your head, come back in a bit - you’ll probably get even more out of it on subsequent reads!

If there’s something I didn’t cover or didn’t cover in enough detail & you want to see a better explanation, or if you have any other feedback, please contact me (contact info in footer)! I’d like to maintain this as a relevant resource.

Firefox vs Chrome

This entire article is going to use Firefox. If you want to follow along point-for-point, you need to use Firefox too. Most processes are pretty similar in both browsers, but I recommend using Firefox in general and building for Firefox because

1. Most of your users will use Chrome, so they’re likely to send you error reports if they find some edge case. Ensuring your software works on Firefox is up to you, so you should do most things in Firefox.
2. It’s vital to support a non-Chromium browser so that Google cannot dictate the future of the internet.
3. I think Firefox’s dev tools are overall better anyway.

Opening dev tools

The best way is to use a hotkey, Ctrl+Shift+C if you want the inspector or Ctrl+Shift+K if you want the console.¹

You can also use Ctrl+Shift+I to open the most-recently opened dev tools page.²

And if you don’t want to use a hotkey, you can go Tools > Web Developer Tools > Browser Tools.

Inspector

Generally, when editing CSS, you’ll want to start on the Inspector tab and maybe also use the Style Editor tab. If you’re really stuck on something, you can check the Console tab too, but usually the Console is for JavaScript.³

Customizing what you can see

When you first open the Inspector tab, you’ll get something that probably looks something like this:

Or maybe it looks like this:

I’m going to keep it docked to the bottom, but it can be useful to dock it in either location (or pull it out to a separate window), depending on what you’re doing. Here’s how you can change that:

If you want to change between Light & Dark, you can open the Settings; and you can also turn on and off some features if you want. If you feel better only seeing Inspector, Console, and Style Editor, and all you’ll be doing is editing CSS, you can probably hide the rest of the tabs. But don’t forget about them!⁴

There’s one other thing we should configure. Click this button:

After you do so, you should have three panes across, instead of just two, like this:

The only reason to ever go down to 2 panes is if you don’t have enough horizontal resolution to do so (and this is part of why I almost always dock to the bottom). It’s MUCH easier to do things when you can see all 3 panes at once.

Welcome to the Inspector tab

Great, now we should all be looking at roughly the same thing! I’m inspecting the page about Sophia on the wiki.gg TemTem wiki⁵ if you want to follow along - though I picked pretty much a random article to use as a demo, so it’s possible it’ll look different in the future.

Let’s look at some important/useful features of the Inspector tab:

1. This window shows the page’s HTML. You can use the arrows to expand & contract sections (called “DOM elements”), and when you hover an element, the place where it’s rendered on the screen will be highlighted, assuming it’s within your current viewport. If not, you can right-click it and then say “Scroll into view.”
2. This field lets you filter styles. For example, if you know you’re looking for something to do with color, you can write color here and then you’ll see only rules where a property name, selector name, or property value includes the string color.
3. This area (the “Rules” tab) shows all of the CSS rules that are applying to your currently-selected element (possibly filtered by what you wrote in section 2). If a rule is crossed out, it means that it’s being overridden by something with higher specificity.⁶
4. The Layout tab is one of the two most-useful tabs in the right-most pane.
5. The “Computed” tab is the other one you’ll go to a lot, and we’ll take a look at it later.
6. This “Overlay Grid” shows up any time there’s a CSS Grid element on the page, and you can get an overlay showing you the grid regions. Super useful when it’s relevant.
7. The “Box Model” pane shows you the general “shape” of the element you currently have selected. If you don’t know that phrase, you can read about the box model on MDN. But briefly, it means that the space an element “takes up” is defined by:
   • The margin outside of it (margin box).
   • The border at its edge (border box).⁷
   • The padding between its edge & its content (padding box).
   • The space that the content takes up (content box).
8. Toggle Element Picker. In part 1, we saw how to choose an element to look at by clicking the HTML & then finding it in the rendered content. What if we wanted to do the opposite - hover over the content window until we find the element we care about it, and then see it in the Inspector window? This is how.
   • If you open the inspector via Ctrl+Shift+C, the Element Picker is enabled by default. This button is a toggle, so you can turn it off by clicking here too, if you don’t want to actually pick an element.

Using the Element Picker

Let’s look at what happens when we use the Element Picker:

1. The HTML of the cell I had selected before I entered Element picker mode is still highlighted
2. This is the cell I had highlighted before.
3. The currently-highlighted opening tag.
4. The currently-highlighted closing tag.
5. The element I’m hovering right now. Notice it’s highlighted in blue, and it tells me a bit of information about the node⁸ in a tooltip.

A couple other things to notice:

• All of the information in the two right windows are about the previous node. That won’t change in real time while you pick, but once you click the new node it’ll switch over to it.
• If you’re inspecting a page you yourself created or edited, the HTML should look pretty familiar. It’s showing you the content, elements, CSS classes, and inline styles that you wrote - this is literally the HTML that the page is displaying right now.
• Sometimes, it can be a bit difficult to select the exact right node that you care about. If you’re having trouble, click the nearest ancestor you can easily select and then start expanding its children by hand in the HTML viewer.⁹

The “Computed” tab

I promised we’d talk about the “Computed” tab, so let’s do that. Here’s an example tab:

Here, we’re looking at:

1. The current tab (Click “Computed” to get here)
2. Just like in the middle tab, there’s a filter here. These lists can get REALLY long, so you might want to search for something like position or color.
3. The left-hand column shows a list of rules affecting the given property. In this case, there’s 3:
   • The class .mw-body has a color value of var(--wiki-content-text-color).
   • The class .mw-body also has a color value of rgb(32, 33, 34) - but that’s located earlier in the stylesheet than the first rule is, so it has lower specificity.
   • The root element of the document (represented by the pseudoclass :root) has a color with value canvastext. Don’t worry too much about understanding this, but know that it’s the rule with the least specificity.
4. The current value of the expanded property on the currently-selected element.
5. A link to the CSS implementing this rule. If you click this, you’ll be taken to the Style Editor tab, and you can edit the raw CSS and have it live update.

The “Computed” tab is generally used when you want to know why some property on an element has its value, and not just what that value is. Here are some reasons you might need to use it:

• You can’t figure out which ancestor element is giving your current element its color (or other property).
• You want to change a rule, but you don’t know which element to change it on, so you look here on some random child & then locate the correct ancestor.
• You wrote a new rule and it’s not showing up, so you want to check:
  • How much specificity do you need in order to override the existing rule?
  • Is your new rule actually targeting the correct thing, even if it’s not specific enough? If it is, it’ll show up in this list, just maybe not as the first thing.¹⁰
• You want two unrelated elements to have the same value for some property, so you go here to find what the current value is (perhaps inherited from somewhere else) & then copy it.¹¹

The “Rules” tab

The “Rules” tab is the middle tab in the three-column layout. You’ll likely spend a lot of time here, so let’s look at each part individually.

For this entire section, we’ll work on modifying this link:

(The screencap is cropped to make it easier to read & because the right-most tab isn’t relevant to this discussion.)

Toggle pseudoclasses

What if we wanted to see how it’s going to look while a user is hovering it? Or check if it looks different when visited from unvisited? Or when it’s active (in this case, while a user is actively holding down the left-click button on the link)?

Of course, we can perform these actions for real, but that makes it kinda hard to use the inspector tools at the same time. Better is to artificially trigger a pseudoclass!

Here’s how we do it:

1. Click this button to toggle open the menu.
2. The new menu. You can choose any number of available pseudoclasses at the same time.
3. Look at the rule that’s now showing up because we selected hover!
4. The HTML of the element we’re looking at, highlighted in blue. Notice the yellow dots on the left. If you hover one element, you also hover all its parents! That’s not true for all pseudoclasses, though.
5. The rendered view of our link, which is now underlined!

Add classes

The next button lets you toggle visible classes.¹² You can also add a new class here, which will actually modify the DOM and add it to the list of classes that the current element has. Once you’ve added a class like this, you can also toggle it on and off.

Editing the DOM/HTML inside of your inspector is a very powerful ability because it helps you preview HTML changes without editing code or reloading the page.

Add new rule

Adds a new rule that will style the currently-selected element. It guesses at a selector that you might want to use, and then you can edit the selector and also preview any styles you might want to.

Let’s look at an example:

1. I clicked this button.
2. The selector it thought of was a, because the link I clicked has no classes on it and also no ID. To the best of my knowledge:
   • If your element has an ID it uses that, no question.
   • Otherwise it attempts to use classes as a selector. If you have multiple classes on this element, it will pick all of them, like <div className="class1 class2"></div> would get .class1.class2 as the selector.
   • Otherwise it falls back to an element selector, as in this case.
3. Here’s the rule I added: color: fuchsia. Note that you can edit the property name & value independently. If you’re following along, try changing color to background-color. Then try changing fuchsia to red or blue.¹³ What happens?
4. The most important reason (imo) for adding a custom rule: It automatically creates a new custom stylesheet and links to it. Then you can click this & edit a custom CSS file to your heart’s content.
5. This is the currently-selected element (notice its class list is empty, and it has no ID).
6. Now all our links are pink (well, fuchsia)! And it’s really all of them, because we added a new rule applying to all a elements.

Theme toggle

If your webpage is responding to prefers-color-scheme, you can use the next two buttons (the sun and the moon) to turn on “force prefers light” and “force prefers dark.” If you’ve hard-coded some preference on the website and there’s some code overriding your “prefers” setting, these buttons might not work.

The last button

I have never in my life used “Toggle print media simulation for the page,” but I don’t know, maybe you want to be printer-friendly.

The “element” selector

The element selector lets you simulate inline CSS. This is useful because it lets you easily apply rules to just this one node, but it can be a bit of trap because you probably¹⁴ are not writing inline styles in your HTML, so you’ll get lied to about specificity.

Let’s go on a tour:

1. The selector. The “element” selector will usually be at the very top of the list, but if there are pseudoelements (::before, ::after)¹⁵, those will display above this.
   • element is not a real selector; you can’t write that in a stylesheet. It’s just what the browser displays to say “edit the current element.”
2. Instead of a link to a stylesheet, it says inline here.
3. If a rule is invalid (in this case, margin: dinosaur;) it will show a hazard sign. This is true of every rule in the list, not just on the current element.
4. Click here to add a new rule. You can press Tab or Enter to autocomplete, and also scroll within a list of available options from a pop-up menu as you’re typing. While an option is hovered, it will render in real-time in your display; this can be really useful if you can’t remember which value to use for justify-content in your flexbox styling.
5. The currently-selected element. Notice that all of our changes are physically edited into the HTML. The rules list, HTML, and live display will always all be synced to each other.
6. Look at our change!¹⁶

Editing rules

You can edit selectors, property names, and property values by clicking on them. You can also temporarily disable or re-enable certain rules by unticking or re-ticking their boxes. Play around with it a bit and redesign the entire webpage!

Responsive design mode

If you want to see how your design looks on mobile, you can shrink your entire window to the size of a smartphone. But that’s pretty annoying - it also shrinks your dev tools, and if you have 100 tabs open that’s kind of a pain too.

Fortunately, there’s a built-in way to shrink your viewport to the size of a mobile device, while keeping everything else the same size. This button right here:

When you click that, you’ll get something that looks like this:

1. This is a dropdown where you can select different common device resolutions. You can also manually set the resolution by typing into the fields for width & height.
2. Toggle how your mouse behaves: like a mouse or like a touch/tap input. This can be super useful if you’re writing event handlers.
3. Take a screenshot of your current viewport. This action will save the screenshot to your default downloads location; if you are on Windows and haven’t configured anything, this will be something like C:\Users\River\Downloads (replace “River” with your username).
4. Open some settings, which e.g. lets you left-align instead of center-align the viewport.
5. Exit responsive design mode (return to normal view).
6. Also exit responsive design mode by re-toggling the “open responsive design mode” button.

All of the dev tools work pretty much the same way in Responsive Design Mode; you can use the style editor, console, etc, just as normal.

Style Editor

The style editor will look something like this if you open it in the way I described above, by adding an empty rule and then opening its stylesheet:

You can toggle sheets on and off using the eye button on the left-hand side, which can be pretty useful if you want to compare a before-and-after of a bunch of edits you’ve made. Changes also show up in real time from here, so this is one of the best ways to test CSS.

The one downside is that if you navigate away, you instantly lose all your changes with no hope of regaining them. For this reason, if you want to test extensive changes, I recommend using the Stylus extension. Create a new sheet for your current URL, save it once, and then after that initial save all your changes will show up in realtime.

Note that in both of these cases (using the Style Editor pane & Stylus extension), your new CSS will be physically at the bottom of all loaded stylesheets. So, if you create a rule with equal specificity to an existing one and then paste it above that original rule, your new rule won’t apply. You need to make sure you either keep the same order or add extra specificity here.

Console

Do NOT paste anything here unless you understand what it does. Especially do not paste code given to you by a stranger!!!

The Console tab lets you run and test JavaScript. I sometimes open a console just to check JS syntax because the UX is pretty nice as long as you don’t need any libraries; for example, try typing 4+4 and notice that it previews 8 even if you don’t execute it. (However, I am probably a stranger on the internet, so type nothing into the browser console that I tell you to, unless you understand what it does.)

More importantly (imo), the console is where any errors and logs will display. Print-based debugging is the best, so sprinkle console.log('kittens') and console.log('case 1') console.log('case 2') console.log('case 3') when your code doesn’t work and look at the results.

Storage

The last tab I’ll talk about is Storage - in particular, you can edit your Local Storage from here, which is super useful if you’re interfacing with localStorage from an application and need to clear your values, manually change them, put something invalid to see how your code behaves, etc.

Further resources

The reason I wrote this post is I know of literally no resource about using Dev Tools. But here are some useful resources about CSS:

• CSS Grid Garden - learn CSS Grid
• CSS Flexbox Froggy - learn Flexbox
• Stylus for Firefox - my recommended style editor (also linked earlier)
• freeCodeCamp - probably the best place to learn beginning HTML & CSS (it’s free, friendly, and very interactive with a lot of playgrounds to practice & play with)