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, allows 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 releasedPage 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
Bonus Tip: Pressing F12 also opens debug while on any web page.
Comments
Post a Comment