Web Inspectors Round Up

Debugging your website doesn't have to be a tedious task of trial and error; every browser comes with some built-in developer tools that will let you inspect individual elements, live test CSS, or even go as far as helping you find different parts that can be furthered optimized! In this tutorial, we'll take a look at each browser's native tools and some basic tips on how to use them.

Quick Overview

In this basic overview, we'll mainly be checking out how how to tweak front-end code (HTML/CSS) with out inspectors. Even with these simple tasks, you'll find the inspectors to be incredibly powerful and useful in your everyday workflow. Most browsers will allow you to click anywhere on a page and "Inspect an element", or something similar. By selecting this option, the browser tool will appear, normally in some lower panel. Let's look at the basic interfaces of the tools for all the main browsers. I'll be separating the markup (HTML) panels in red, and the stylesheet (CSS) sections in green.

Firefox

Upon first launch, Firefox's native inspector will simply highlight the inspected element with a dashed border, a name, and provide a small toolbar across the bottom of your view-port. We can expand the CSS into a sidebar with the "Style" button on the right corner, and expand the HTML with the 2nd button on the left corner. You'll notice that the currently highlighted element is a span, with an id of #phone-screen. On the right, you'll see it's dimensions and other properties. The cool thing about the inspectors is that I can live edit all of this to my whim. In the following image, you'll see that I have selected the title, and altered its contents to something much sillier.

I find it worth mentioning that you can optionally install the awesome Firebug extension, which adds a ton more features (similar to what you'll see in the next inspector) and has been used by Firefox devs before Firefox even had it's own native tools to work with!

Webkit (Safari/Chrome)

We can do the same for CSS, this time we'll do be doing it from Chrome's powerful Web Inspector. You'll immediately see both HTML and CSS here, and in our example we've selected this shiny blue button asking us to download Chrome. We're going to alter that and make it green instead.

By simply clicking the property's value in the CSS panel, we can edit and alter all our styles and see the results instantly. This is incredibly useful when you are trying to find just the right color or position for a certain element, without having to constantly save/refresh back and forth between editor and browser. You'll probably notice some extra stuff in the Web Inspector compared to Firefox's. For example, here you will see ALL the browser prefixes (albeit crossed out, since Chrome will only use one of them) with a little warning symbol by the properties that are unrecognized. This can also help you catch a misspelled property that might slip through while coding.

Safari has the exact same tool as Chrome, since they both are powered by the Webkit engine, however, you will probably need some extra work in enabling it on that browser.

Opera

Currently, Opera is still using it's own inspector though this may change in the future as they are also moving to the Webkit engine soon, so it's very possible it will use the Web Inspector mentioned above in a future release.

You'll notice in the CSS panel I've selected a Layout tab (other inspector's may have this in different areas, but it should still be called Layout) which will show you the box-model properties of any currently selected element. This helps narrow down the options, in case you don't want to stare at a huge list of properties on a certain element, and instead just check it's measurements.

Internet Explorer

Last, but certainly least, is IE's Developer Tools. IE's tools seem to be the weaker of the bunch, with live editing being finicky at times (particular when debugging in older version modes of IE) but something is better than nothing. The tool was added in version 8, and has basically been the same since then. One thing to note: unlike the other browsers' CSS panels that have your selected element's styles on top and inherited styles on the bottom, IE flips this so the most specific styles are on the bottom.

Advanced Usage

You can use these tools for much more than HTML/CSS edits. I encourage you to explore and learn more about your favorite browser's tools, familiarizing yourself with as many portions of it as possible. In 2010, Google I/O recorded a great and incredibly thorough talk on the Web Inspector that is definitely worth checking out. Most of what you learn in one inspector can usually be applied in some form or another to another browser's tools too, so don't be worried about having to learn a ton of stuff for each individual browser, familiarizing yourself with one will usually make you feel at home with the rest!