How the Web Inspector can make you faster, stronger, and more good-looking

Last updated on:January 31, 2017

The reactions are just priceless whenever I pull up my browser’s Web Inspector in front of somebody who isn’t a developer. All I’m doing is debugging some simple CSS, but by the shock and wonder on their faces, you’d think I was hacking the damn Pentagon. That’s just silly! Everyone knows you need two people simultaneously typing on the same keyboard to hack the Pentagon.

Everybody likes to use that Arthur C. Clark line about magic and technology to try to calm people down about intimidating technology, but I find that quotes from some random genius guy don’t make me feel that much better. So let’s try one from your mom or dad instead:

Don’t be afraid of the Web Inspector. The Web Inspector is more afraid of you than you are of it!

Just trust me: if you can learn a couple of simple simple things about the Web Inspector, it will:

  1. Help you find what’s causing a problem
  2. Help you make changes faster
  3. Help you talk to devs better (cutting down on communication time)
  4. All of which: save you time, save you money.

What is the Web Inspector, and What Does it Do

The Web Inspector is a panel that ships along with most browsers. Each browser uses its own version, meaning that the Web Inspector appearance and features will vary based on whether you’re using Chrome, Firefox, Safari, Internet Explorer, Opera, and so on.

It is important to note that none of the things you change in the Web Inspector get saved. So 1: You’re not going to break anything by using it. But 2: if you make any changes that you want to save, copy and paste them somewhere else before reloading the page.

There are 3 basic parts to every Web Inspector that you can use every day to make your website better. They are:

  1. The Page Markup Panel
  2. The Styles Panel
  3. The Console Panel

Activating The Web Inspector

The Web Inspector is your best weapon for understanding the basics of how your website is put together, but first you need to know how to activate it.

  1. First, right-click on an element on the screen.
  2. At the bottom of that menu, there should be an option titled “Inspect.” Click that.*
  3. This a) opens the Web Inspector and b) automatically selects the element that you right-clicked on.

Go ahead and right-click on that headline up there and inspect it. You ought to see this in the Page Markup panel:

<h2>Activating The Web Inspector</h2>

*If there isn’t an option titled “Inspect,” your browser’s Web Inspector must be activated in a different way. Google the name of your browser plus “Web Inspector” and see what you find.

The Page Markup Panel

Part 1: The Page Markup Panel

The Page Source

This panel makes it easy to view all the markup on the page. It’s different than the Page Source (e.g., view-source:https://wpeditorpro.com/2017/01/30/the-basics-of-the-web-inspector/) because it auto-indents and auto-collapses all the page markup, making it easier to scan across the page.

The Page Markup panel is also dynamic: any changes that happen to a page (like a slideshow changing images) will be reflected in the Page Markup panel. The Page Source is static: once you load it, it don’t change. It just kinda sits there, like a rock.

 

Repeated for example purposes.

4 Tips for Using the Page Markup Panel

  1. Selecting an element in the Page Markup Panel highlights where that element is displayed on the page. For example, that <h2> is selected in the example screenshot, and it’s shown on the page in blue.
    1. Blue: the element itself
    2. Yellow: padding on the inside of the element
    3. Orange: margin around the outside of element
  2. Use CTRL + F or CMD + F to search the page source. Using the browser’s search box is a huge speed boost to browsing the Internet, but it can also be used to search the page markup!
  3. You can move or delete elements in the Page Markup Panel. Think that image would look better beside that headline instead of after a paragraph? Just click to select it, then start dragging it around!
  4. You can find an element’s dimensions. The size is displayed next to the highlighted element.

Page Markup Panel Example

The heading tag selected in our example is 524.31px wide x 111px tall. It’s important to note that the width and height are calculated by element size plus padding, but not margin. So the headline is 72px tall by itself, but it has that yellow bar of 39px worth of padding, making it 111px tall. I found that out by using The Styles Panel.

The Styles Panel

Part 2: The Styles Panel

The Styles Panel shows all the CSS rules that are being applied to the selected element in the Page Markup Panel.

8 Tips for Using the Styles Panel

1. CSS rules with a line through them are being overwritten by a different CSS rule. (Like “font-size,” below)

Toggle CSS rules

2. You can toggle CSS rules on and off again. Hover on a ruleset will make the checkbox appear on the left.

Change existing CSS values

3. You can change any CSS properties or values. Using the arrow keys makes number values go up or down.

Add new CSS values

4. You can add new CSS rules. Click on the last value and hit “Tab” to add a new line.

Using the computed tab to find dimensions

5. Use the Computed tab next to the Styles tab to view an element’s dimensions.

Filtering a specific CSS property or value

6. Use the unobtrusive “Filter” box to search for a specific CSS property or value.

Trigger hover styles

7. Use the “:hov” button to trigger a hover state (especially good for complex hover effects and drop-down menus)

Toggle classes on and off

8. Use the “.cls” button to toggle an element’s CSS classes on and off.

Styles Panel Examples

  1. Color testing: if you want to test out a different color for a headline, add a new color rule, like this: color: blue. Then, you can toggle that CSS rule on and off again to compare it to your current one.
  2. Transition testing: you can change the way a transition is executed by clicking on the easing button.
  3. Value searching: type “font-family” in the “filter” box, and you’ll be able to see what font is being used on the selected element.

Part 3: The Console Panel

I saved the easiest for last. My rule here is short and simple: if something does not look right on your webpage, check the Console Panel for errors. They’ll appear as red lines with red X-marks next to them.

Console Panel Examples

  1. 404 errors are displayed in the Console: like if you tried to display an image, but the link isn’t right, or a CSS stylesheet isn’t loading.
  2. JavaScript errors are also displayed in the Console. This is important, because one JavaScript error can break all the JavaScript that comes after it in the page.
  3. Try to figure out the source of an error: look for a URL like “/wp-content/plugins/” and note the plugin name that comes after “plugins.” Being able to tell a developer “Hey, I think there’s a problem with that slider plugin we installed,” instead of running over to them, arms waving frantically, shouting “THERE’S SOMETHING WRONG WITH YOUR CODE” will get the problem fixed much faster.

How do you like to use the Web Inspector?

Got another way you like to use the Web Inspector? Let me know! Did I miss something in my coverage of the basics of the Web Inspector? I’ll add it in! Am I a hack who doesn’t really know anything about web development? Please don’t tell my mom (she’s so proud of me)!

If you want to learn more about the Web Inspector, some guy named Umar Hansa has a website that is just chock full of cool gifs of things you can do in Chrome’s DevTools. If you give him your address, he’ll send you these gifs via electronic mail! Free of charge, even!

Leave a Reply

Your email address will not be published. Required fields are marked *