A Web Inspector Tutorial for Front-End Developers

resource tutorial
web-inspector-400-200

Post Tags

Every browser comes with a handy tool called the Web Inspector which can help you, the developer, get a better grasp of the code behind any website. In this tutorial we’ll walk you through some of the Inspector’s handiest features.

If you’ve ever worked with content management system like WordPress, or even just an existing web page template, you’ll probably agree that sometimes the trickiest part of customizing your site is understanding where in your theme files certain CSS styles are being set.

For example, maybe your site came with a mustard-colored sidebar which you want to change to a light grey. Unless the theme you’re using has a configuration for that (in the case of WordPress), you’ll have to dig into the code to track down what HTML element the sidebar is in, and also what CSS selector is setting the color.

Our favorite tool for making this process smoother is called the Web Inspector, and it’s something built into every browser. Let’s pop the hood on this gadget and see how it works. I’ll be using Google Chrome for this tutorial, but you should see the Web Inspector looks pretty similar across other browsers.

To demonstrate, I’m going to explore our very own homepage at http://thewc.co but this will work on any website, even locally hosted ones. Once you’ve picked the site you want to tinker with, right-click anywhere on the page and look for the Inspect Element option on the bottom of the resulting menu. After you choose this option, the Web Inspector window should pop-up across the bottom of your screen.

inspect-element-open

Inspecting the HTML

inspect-element-html@2x

First, let’s take a look at the HTML on this page which you can see in the wide panel on the left (make sure you’re in the Elements tab).

If you click the little magnify glass icon on the top right (in other browsers it may be an arrow), you can start hovering around objects in the page which will light up as you mouse over them. Click on any element and the corresponding HTML code will be highlighted in the browser.

For an example, in this screenshot, watch how I narrow in on the big green button:
inspect-element-magnify-glass

Alternatively, you can click on HTML elements directly in the Inspector, and it will highlight the element on the page.

These two methods will be useful when you need to identify where in your HTML code different elements are being set, and how everything is organized together.

Inspecting the CSS

inspect-element-css@2x

Now let’s take a look at what the Inspect Element can tell us about the CSS of a website. To the right of the HTML panel, you’ll see the CSS panel.

This panel shows you every CSS selector that has set some style declaration for whichever element you’re inspecting.

For example, in the above screenshot where we selected the green button, we can see that there’s a class called .button-3d-hover that is applying a background, box-shadow, and top property to the button.

You’ll also notice it mentions which .css file this declaration is being set in, including the line number you’ll find it in the file. This is pure magic for tracking down styles in WordPress themes! Pro-tip: click on the file name and it’ll actually load it in the left panel and take you directly to the line number.

FAQ: What does it mean if a line is crossed out?

If you see any declarations crossed out in the CSS panel, it’s telling you that some other selector is overwriting that declaration. This makes a lot of sense, because CSS is, afterall, a cascading language. I may create a declaration that at the top of my style sheet sets all paragraphs to have a grey background:

p {
    background-color:grey;
}

But then, later in my CSS I may overwrite that for just one paragraph so that it has a yellow background-color:

p #important {
    background-color:yellow;
}

For this example, the CSS panel would look like this:

inspect-elements-crossed-out@2x

FAQ: What does “User Agent Stylesheet” mean?

inspect-element-user-agent@2x

Sometimes instead of seeing a link to the stylesheet in the top right corner, it will simply say “User Agent Stylesheet” that doesn’t offer a link. This is styling that is being applied by the browser you are using.

CSS Box Model Visual

inspect-element-box-model

Moving on, if you scroll all the way to the bottom of the CSS window, you will see a multi-colored box which shows you details about the margin, border and padding on any given element. If you’ve ever struggled to wrap your head around the CSS “box model”, you’ll find this dynamic diagram very helpful.

Computed

inspect-element-computed

So far we have been viewing the CSS under the styles tab, which you can see at the top left of the CSS panel. Next, let’ move one tab to the right and look at the Computed tab.

At the top of this window, you’ll see the box model that was just discussed. Below that, though, is a quick and dirty list of all the CSS being directly applied to that element. You can click on the arrows beside each item for additional details if you need them.

Real World Scenario

For an example of how you might put the Web Inspector to use, imagine you’re scoping out the WordPress theme Path and you’re curious what font they’re using on their headers.

Using the magnify glass, you can focus in on the <h1> tag, and then in the Computed tab, expand the font-family property. According to what we see here, it looks like originally the font was set to “Source Sans Pro”, but later in the CSS it was overwritten to be “Roboto Condensed.” Pretty neat!

inspect-element-detect-font@2x

This is only one scenario of many where Inspect Element can help you style and better understand a website’s HTML and CSS. Whether you’re tweaking your code, troubleshooting a problem, or just trying to figure out “How did they do that?” on a site you’re admiring— the Inspect Element is a must-have addition to your web developer tool belt.

Comments are closed.