Firebug is a free and open-source web browser extension for Mozilla Firefox that facilitates the live debugging, editing, and monitoring of any website’s CSS, HTML, DOM, XHR, and JavaScript.

Firebug is licensed under the BSD license and was initially written in January 2006 by Joe Hewitt, one of the original Firefox creators. The Firebug Working Group oversees the open source development and extension of Firebug. It has two major implementations: an extension for Mozilla Firefox and a bookmarklet implementation called Firebug Lite which can be used with Google Chrome.

Features

Firebug makes changes immediately and gives constant feedback to the user. All editors in Firebug support autocomplete.

The Firebug command line accepts commands written in JavaScript. The result of executing each command is displayed in the console, appearing as hyperlinks. The Firebug application contains multiple windows, splitting related features to a common window. Firebug also allows users to view the download time for individual files. It separates different types of objects, such as JavaScript files and images, and can determined which files are loaded from a browser’s cache. Firebug also features the ability to examine HTTP headers and time stamps relative to when an HTTP request is made. Its net panel can monitor URLs that the browser requests, such as external CSS, JavaScript, and image files.

HTML and CSS

The HTML and CSS tools allow for the inspection and editing of HTML and CSS elements on a web page. Later versions of Firebug allow users to see live changes to the CSS. Visualization of CSS elements is shown while inspecting HTML elements. The Firebug layout tab is used to display and manipulate CSS property values. Furthermore, users can click on any visible HTML elements on a web page to access its CSS property values.

JavaScript Console

Firebug’s script tab enables users to set breakpoints and step through lines of code. Additionally, Firebug can navigate directly to a line of JavaScript code, watch expressions, call stacks, and launch the debugger in the event an error occurs during execution. Firebug can also log errors. Logging uses a Firebug JavaScript API. Firebug’s JavaScript panel can log errors, profile function calls, and enable the developer to run arbitrary JavaScript. Firebug allows users to run JavaScript code through the command line and allows the user to log errors that occur in the JavaScript, CSS, and XML. Firebug provides a separate text editor to modify the JavaScript and see immediate results on the user’s browser.

As provided in an update, the JavaScript command line features an autocomplete function. The text editor also provides the ability to write full functions. Firebug requires a user to refresh a web page in the event of a crash.

How is Firebug Doing?

Firebug isn’t standing still. The Firebug Working Group continues to improve it, as you can see in their latest 1.12 release. Firebug is working hard to move from JSD to the new Debugger API, to reap the performance and stability benefits we added for the Firefox Developer Tools.

After that? Jan Odvarko, the Firebug project leader, had this to say:

Firebug has always been maintained rather as an independent project outside of existing processes and Firefox environment while DevTools is a Mozilla in-house project using standard procedures. Note that the Firebug goal has historically been to complement Firefox features and not compete with them (Firebug is an extension after all) and we want to keep this direction by making Firebug a unique tool.

Everyone wants to figure out the best way for Firebug’s community of users, developers, and extension authors to shape and complement the Firefox Developer Tools. The Firebug team is actively discussing their strategy here, but hasn’t decided how they want to accomplish that.

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.
Reference
www.wikipedia.com