Debug web pages in Firefox with Firebug

Whether you're a Web designer or a JavaScript programmer, Firebug provides invaluable tools for debugging websites.

By Erez Zukerman, PC World |  Software, Firebug, Firefox

For Web developers like me, one of the most burning questions is "why does the page look like this?" Firebug is a free add-on for Firefox that can answer that question very quickly and in great detail. With over 1.6 million users and a five-star review average from 1,144 user reviews, Firebug 1.8.4 is a must-have Web development utility, especially when you consider the price tag (free).

The page that appears in the browser window is usually a combination of HTML, CSS, and JavaScript. Firebug offers inspection facilities for each of these components, so you can figure out exactly why a certain image isn't where it should be (CSS, usually), or why that JavaScript animation never runs.

When debugging JavaScript, Firebug lets you set up breakpoints in the code, inspect variable values, step through functions, and do everything else you would expect from a modern debugger.

Modern browsers such as Chrome and Opera feature built-in developer tools that strongly resemble Firebug, but make no mistake, Firebug was there first: It was originally written in 2006, about two years before Google Chrome and Opera Dragonfly (Opera's developer tool) ever saw the light of day. A Lite version of Firebug is available as a bookmarklet for IE6+, Opera, Safari and Chrome, but the full version is Firefox-only.

Starting to use Firebug is easy, even if you are not a pro Web developer. Simply right-click anywhere on the page and select Inspect Element from the context menu. Firebug will pop up in the bottom half of the window, displaying details about the element you just clicked. You can also detach the Firebug pane and make it into a standalone window--very handy if you have more than one monitor. You can inspect any page on the Web, not just your own. This makes Firebug into a very good educational tool--think "View Source" on steroids.

When I was doing a lot of work with CSS (cascading style sheets), Firebug was indispensable. It is not always easy to understand why a certain page element shows up where it does or how some website achieved a neat visual effect with CSS3. Firebug let me see what CSS rules apply to each element, and where these rules come from. To test different rules, I simply needed to type them into Firebug and see how they affect the page instantly. No need to type them into my CSS editor, save, upload, and refresh. Firebug also includes such amenities as CSS auto-completion, and incrementing or decrementing values using the arrow keys. It's a fantastic learning tool, too: You can see what each CSS rule means right on the page, and not just by reading a dry description of it.


Originally published on PC World |  Click here to read the original story.
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness