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. Firebug is an absolute must for anyone who develops websites or blogs. Below is a quick overview of this plug-in and an example of 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 allows you to highlight any element on a web page. Using the highlight makes finding and looking at the HTML and CSS of anything on a web page as easy as two or three clicks.
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 wanted 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
Also, Google has released Page Speed, a Firebug plug-in to test a web pages load speed with an overview of things that can be fixed.
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.
Bonus Tip: Pressing F12 also opens debug while on any web page.
- See our source code definition for further information and related links on this term.