1. Computing

Get the "Inspect Element" Tool for Your Browser

View the HTML and CSS on Any Site

By

We build websites with lines of code, but the result is "pages," with images and fonts and sidebars. If you want to change something on the page, you need to find that magic line in the code that controls it. How do you do this? With a little tool called Inspect Element.

You can get this tool pretty easily for any major browser except Internet Explorer.

Right-Click and Try "Inspect Element"

Several browsers include this feature by default. You simply:

  • right-click on an element, like a paragraph or image
  • on the pop-up menu, select Inspect Element…

This works on the most recent versions of:

  • Firefox
  • Chrome/Chromium
  • Opera
  • Epiphany

On Firefox, You Can Get Firebug

Although Firefox comes with Inspect Element, you can get even more power with an addon: Firebug. It doesn't need any configuration. Just click the obvious links and Firefox will install it and restart.

On Internet Explorer

Internet Explorer is a little different. For versions before Internet Explorer 8, you can download the Developer Toolbar.

For IE8 and above, the developer tools are included. Press F12 to activate them.

This toolbar is similar to the Inspect Element feature in the other browsers, but I don't find it as easy and flexible.

Also, this toolbar does not seem to add an Inspect Element entry to the popup menu (at least on IE7 and IE8). Instead, you click the first button on the toolbar, which has a tooltip of Select Element by Click, and then click the element.

You can select element by click on the other browsers too. But I like the right-click popup menu better.

If you use IE, consider firing up a different browser for your main web development. On the other hand, when it comes time to iron out the design bugs that only appear in IE, this toolbar can be essential.

Firebug Lite

You can also try Firebug Lite, a smaller version of Firebug that's written in Javascript. Javascript works in any browser, so you don't need to switch to Firefox.

Even in Firefox, you might prefer Firebug Lite, since the full Firebug can be pretty slow.

Using Firebug Lite is pretty easy. For your own sites, you can add a <script> tag to source the script.

For browsing, you can simply bookmark this crazy Javascript link. When you click the link, it will insert Firebug Lite into whatever page you're looking at.

(If you're trying to reduce how many servers are tracking your web browsing, though, grab the script and install it locally.)

On a side note, I just tried this bookmark on IE7 and IE7, and it didn't work. But that might just be me.

Explore Your Site!

Now that you can reveal the code behind each element on your page, what's next? You'll find this tool essential as you work on theming and CSS, but it has other uses too. For instance, you can figure out whether a site is running WordPress, Joomla, or Drupal.

  1. About.com
  2. Computing
  3. Content Management Systems

©2014 About.com. All rights reserved.