Website Development Within Web Browsers: Firebug
For the commonly used web browsers, there are many free to download add-ons that simplifies various web development tasks. Firebug is a Firefox add-on which provides basic tools for editing and debugging HTML, CSS or JavaScript code while browsing. The modifications made to the current web page are rendered automatically. In case of other web browsers, this add-on is also available as JavaScript code or bookmarklet (Firebug Lite). (related article: Add-Ons That Make Firefox Faster)
The add-on installation in Firefox is easier than you might think: just head to the Firebug page on the Firefox Add-ons website, click the Add to Firefox link and restart the web browser. When you need to adjust or inspect the parameters associated with a certain web page elements, Firebug can be deployed from its corresponding icon situated in the lower right corner of the main window of the Firefox browser.
Firebug helps you to get various information about every element of the current page. By clicking the Inspect button, when you move the mouse over the desired page element, in the left Firebug window the corresponding HTML code will appear highlighted instantly. In the same time, the CSS code of the style applied to the selected element will be also shown in the right Firebug window.
Firebug also gives information about CSS metrics: from the layout tab one can determine the exact positions of all elements based on the offsets, borders, paddings and margins values.
The pages loading time are measured by the network activity monitoring capacity of Firebug, allowing you to modify the factors that influence the optimal rendering time for a given web page. The JavaScript debugger allows the pausing of the code execution in any moment and the profiler indicates the actual code performance.
Firebug is definitely a time saver for web developers. These are the main new features added into the version 1.3:
-Net panel reimplemented, more function, no more double loads (Requires Firefox 3.0.4+)
-Script panel rendering much faster for large Javascript files
-Scope chain in Watches panel when stopped on breakpoint
-Console/Command line re-implemented to avoid some undefined console problems
-Tracing console added
-New locales and better locale support
Related Articles


























































