Firebug is a discontinued
free and open-source
Free and open-source software (FOSS) is software available under a Software license, license that grants users the right to use, modify, and distribute the software modified or not to everyone free of charge. FOSS is an inclusive umbrella term ...
web browser
A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...
extension for
Mozilla Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curren ...
that facilitated the live
debugging
In engineering, debugging is the process of finding the Root cause analysis, root cause, workarounds, and possible fixes for bug (engineering), bugs.
For software, debugging tactics can involve interactive debugging, control flow analysis, Logf ...
, editing, and monitoring of any website's
CSS,
HTML
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...
,
DOM,
XHR, and
JavaScript
JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.
Web browsers have ...
.
History
Firebug was licensed under the
BSD license
BSD licenses are a family of permissive free software licenses, imposing minimal restrictions on the use and distribution of covered software. This is in contrast to copyleft licenses, which have share-alike requirements. The original BSD lic ...
and was initially written in January 2006 by
Joe Hewitt, one of the original Firefox creators. In its 0.2.3 release on January 31, 2006, it was time that F12 was used to open/close the developer tools panel in web browsers. The Firebug Working Group oversaw the open source development and extension of Firebug. It had two major implementations: an extension for Mozilla Firefox and a
bookmarklet
A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small ...
implementation called Firebug Lite which can be used with
Google Chrome
Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, iPadOS, an ...
.
In addition to debugging web pages, Firebug was used for
web security testing and web page performance analysis.
Firebug has been deprecated in favor of the integrated developer tools added to Firefox itself, whose functionality has been unified with those of Firebug. As Firefox 57 no longer supports XUL add-ons, Firebug is no longer compatible.
Version history
Version 2.0
Firebug 2.0 introduced many new features to the Firebug extension including JavaScript
syntax highlighting
Syntax highlighting is a feature of text editors that is used for programming language, programming, scripting language, scripting, or markup language, markup languages, such as HTML. The feature displays text, especially source code, in differe ...
, pretty print for minified JavaScript code, and a DOM Event Inspector to handle all
event handler
In computing, an event is a detectable occurrence or change in the system's state, such as user input, hardware interrupts, system notifications, or changes in data or conditions, that the system is designed to monitor. Events trigger responses or ...
s on a web page. Additionally, users can search for page elements using CSS selectors in the search bar. The debugging tool now allows users to inspect JavaScript expressions as they are evaluated. Moreover, users can inspect values returned from JavaScript functions. It also adds the ability to create new HTML attributes for existing HTML elements.
Version 3.0
On November 10, 2014, Firebug 3.0 was announced and an alpha was made available to the public.
This version was to feature a new theme and would have focused on user experience.
Features
Firebug makes changes immediately and gives constant feedback to the user. All editors in Firebug support
autocomplete
Autocomplete, or word completion, is a feature in which an application software, application predicts the rest of a word a user is typing. In Android (operating system), Android and iOS smartphones, this is called predictive text. In graphical us ...
.
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.
Extensions
Many extensions have been made to enhance Firebug. Since Firebug is open source, users can contribute their own extensions to the Firebug community.
See also
*
Flash of unstyled content
A flash of unstyled content (FOUC, or flash of unstyled text) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before a ...
* (Google Chrome Inspector)
*
Internet Explorer Developer Tools
Web development tools (often abbreviated to dev tools) allow web developers to test, modify and debug their websites. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direc ...
*
Opera Dragonfly
* (Web Inspector)
References
Further reading
*
External links
*
{{Mozilla
JavaScript programming tools
Web scraping
Free software programmed in JavaScript
2006 software
Firefox extensions merged to Firefox
Software using the BSD license
Cross-platform free software