Edit and view web page properties with Firebug

Quickly edit or view the properties of any web page by using the Firefox browser plug-in Firebug or the bookmarklet version of Firebug for other browsers. This free tool is an absolute must for anyone who develops websites or blogs. Below is a quick overview of this plug-in and an example of just a few of the many powerful features it provides.

Quickly view the HTML and CSS source of any element

When Firebug is open, clicking the element preview button, as shown in the picture to the right, will allow you to see the properties of any element on the web page you are looking at. This makes finding and looking at the HTML and CSS of anything on a web page as easy as two or three clicks.

Tip: In addition to the above suggestion after Firebug has been installed you can also right-click on any element on a web page and choose the "Inspect Element" option.

Modify HTML or CSS elements within Firebug and see immediate results

When viewing the HTML or CSS source code within Firebug you can click any element and change or add to that element and immediately see those changes. For example, if you were wanting to adjust the color of your links you could modify the HTML or CSS code through Firebug and see what it looks like on the page without uploading or reloading.

Analyze the page speed load time

In addition to the above mentioned features, Google has released Page Speed, a Firebug plug-in that has the capability of testing how fast a web page loads and gives you a easy to read overview of things that can be fixed or may be slowing down the web page.

View overview of all elements on a page

In Firebug, under the Net tab and under All, you can quickly view all elements on a web page and additional details about each of those elements. For example, you can quickly identify the size of each of the files loaded, domain loaded from, header information, and much more.

Get Firebug

Tip: Pressing F12 will also open debug while on any web page.