Inspect Element Web Development Tool

FIrebug Tools for web development Learn how to customize your own WordPress themeOur favourite Browser extension is Firebug (inspect element) – an open source web development tool. As a web designer and developer, I use Firebug regularly to find elements on a page that I want to style or change.

With Inspect Element, you can easily pinpoint a CSS class for a given selector. It is a great tool for modifying styling of a WordPress theme or plugin. This browser extension simplifies making changes to your website.

Modern browsers include Firebug. Right-click and look for Inspect Element, if you don’t have it working you can get it here and review the documentation

How to use Inspect Element

Right-click at the point on your page that you want to inspect and select “inspect element “. This will bring up the Inspect Element console. On the left, is the Node View pane displaying the generated HTML source of the page you are currently on. Firebug highlights the element so that you can discover what CSS elements are associated with it.

The Style panel (on the right side) shows you what CSS style declarations affect a particular selector. Firebug makes it clear which styles are actively affecting your HTML element. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule.

firebug panel

Firebug Video Tutorial

This is a great Video tutorial from Tips and Tricks HQ that shows Firebug in action.

View part two of the tutorial

Learn how to use Firebug

If you want to learn how to Inspect Element to modify a WordPress theme or style a plugin, take our Workshop: HTML & CSS for WordPress Users

[cross-posted on the Dandelion Web Design Blog]

Leave a Reply

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