Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code?
Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs this tool. The Firebug tagline, “Web Development Evolved” is exactly what the plugin has done in the Web development circles. It is a tool that non-developers will also find invaluable.
Edit Attribute Values
Firebug allows users to inspect <div> tags and change their attribute values. Any change made to the code is immediately visible on the browser window. Firebug works by allowing a user to either click on the browser window elements directly, which in turn, highlights the code that renders the element, or click on the code which highlights the browser elements. This is a useful functionality that allows a user to visualize and resolve float problems and padding or margin issues by simply changing the numeric values or properties associated with those elements.
Debugging JavaScript
Firebug JavaScript debugger allows you to pause executions and measure performance to find bottlenecks. Running inside the browser window has its advantages as well. To debug JavaScript with Firebug, simply launch the Firebug console and go to the “Script” tab from where you can set the “Breakpoints”. Navigate to the “Breakpoint” window on the right panel and click on the appropriate browser window element to activate the code. The execution should stop at the breakpoint that you set.
Similar to other debuggers, you can then use the buttons on the Firebug toolbar to “Continue”, “Step Over”, “Step Into” and “Step Out” during code execution. If you choose, you can let Firebug give you the option to break automatically when an error occurs so you can examine the conditions responsible for the error.
Edit HTML in Real-Time
If you are the sort of user or developer who likes to do quick in-browser tests without having to login or get authorization to access the HTML files, Firebug again comes to the rescue. The ability to edit HTML within the browser window is especially useful when working on a website you don’t own. Firebug allows you to add and remove HTML elements, class or ID to elements and add temporary inline styles. For example, you can test the styles below to see which works better on your site:
style = “color:#FFFFFF”or
style = “color:#FFF000”Always have an HTML editor handy to copy your code since Firebug does not allow you to save the changes. Once you refresh the page or click on a link, all the changes you have made disappear.
Editing CSS on the Fly
For Web designers, CSS is where all the action takes place and learning how to edit CSS properties gives you the ultimate control over how your website looks. Highlighting an HTML element automatically highlights its CSS on the left panel with the most recent declarations appearing at the top. Any inline styles will also be displayed at the top as “element.style”.
Firebug shows clearly what CSS properties are affecting the selected HTML element. Those that have been superseded by another declaration are crossed out, meaning that that rule has been overwritten by another rule which came after or has the ‘!important’ designation. That however, is not the end of the road. You can actually edit the CSS right inside the Style side panel.
CSS properties and values can be disabled or added that affect the web page in real-time. Any inline style that you add will not appear on the Style side panel but its effect will be visible on the browser window.
Try out Firebug and see how it works out for you. If you are like me, you can also use it to prank your friends by editing a popular web page and watching their reaction.
