What is a firebug? Have you ever heard of it?Firebug is an open source web development tool for the extension of Mozilla Firefox web browser. It’s a useful and practical feature that would benefit any web developer or designer. This real-time coding tool reduces the guesswork out of debugging web pages, among many other things such web page layout inspection or testing and web performance profiling, to speed up your workflow. Whether you are building a web page, adding a new CSS for a responsive web design, troubleshooting web layout issues or inspecting how other websites are built, Firebug is going to be a valuable tool.

Have firebug in its own window

Once you have firebug open, press the ‘Open firebug in new window icon’. This is done to break it out of the browser. This can be done for big monitors or for multi monitor computer set-ups.

Once you opened the firebug, you’ll be in the HTML panel by default. This panel will help you to inspect and understand the web page’s HTML. There are two panes in HTML panel; they are Node View pane and right side panels. The Node View pane is the one on the left displaying the generated source of the page you are currently on. The second pane, on the right is the side panel; this panel gives you more information on the highlighted element.
There are four side panels in the HTML panel:
1) Style
2) Computed
3) Layout
4) DOM (which stands for document object model)

How to Edit HTML using Firebug

For quick in-browser tests and situations where you don’t have access to the HTML files, Firebug is perfect. In Node View of the HTML panel, you can click on any HTML element and edit it. Add or remove whatever you like and then see what results your changes make to the web page. Using this tool you can Add/remove entire HTML elements, Add/removing a class or ID to elements, Substituting longer text on titles and buttons to test line breaks, Adding temporary inline styles for quick testing using the style HTML property.

How to edit CSS using Firebug

Firebug makes it clear which styles are actively affecting your HTML element by crossing out the CSS properties that have been superseded by another CSS property declaration. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule, or by being. In fact The great thing about the CSS in the Style side panel is that it’s editable.
To see how the web page would look if you changed the element’s property. Click on the property value and change it. You can also change the property itself (e.g. change padding-top to padding-bottom). When you’re editing CSS in the Style side panel, the Enter key will jump to the next editable cell – from property to value, and down to the next property.


Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>