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
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
This works on the most recent versions of:
On Firefox, get Firebug
For Firefox, you'll need to get an addon: Firebug. It doesn't need any configuration. Just click the obvious links and Firefox will install it and restart. Now you can right-click and
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.
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.
(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.