Firebug (software)

{{Infobox software

| name = Firebug

| logo = Firebug logo.png

| logo size = 100px

| screenshot = Firebug extension screenshot.png

| screenshot size = 250px

| caption = Firebug 2.0.1 running in Firefox 30.0 under Windows 7 with the HTML panel active on the

main Wikipedia page.

| author = Joe Hewitt

| developer = {{url|https://getfirebug.com/wiki/index.php/Firebug_Working_Group|Firebug Working Group}}

| discontinued = yes

| latest release version = 2.0.19{{cite web|url=https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/|title=Firebug Version History|date=2017-02-16|work=Mozilla extension|access-date=2015-08-19|archive-url=https://web.archive.org/web/20170702174937/https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/|archive-date=2017-07-02|url-status=dead}}

| latest release date = {{Start date and age|2017|02|16}}

| programming language = JavaScript, XUL, CSS

| operating system = Cross-platform

| genre = Mozilla extension{{Cite web |url=https://addons.mozilla.org/en-US/firefox/addon/firebug/ |title=Mozilla Firefox Add-on |access-date=2011-09-27 |archive-url=https://web.archive.org/web/20170424182937/https://addons.mozilla.org/en-US/firefox/addon/firebug/ |archive-date=2017-04-24 |url-status=dead }}

| license = New BSD License{{Cite web |url=http://getfirebug.com/getinvolved |title=Overview of Firebug |access-date=2014-11-13 |archive-url=https://web.archive.org/web/20141206062440/http://getfirebug.com/getinvolved |archive-date=2014-12-06 |url-status=dead }}

| website = {{url|https://getfirebug.com/}}

}}

Firebug is a discontinued free and open-source[https://github.com/firebug/firebug Firebug on GitHub] web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.{{Cite web |url=http://getfirebug.com/whatisfirebug |title=Firebug Home Page |access-date=2014-11-13 |archive-url=https://web.archive.org/web/20141222221837/http://getfirebug.com/whatisfirebug |archive-date=2014-12-22 |url-status=dead }}

History

Firebug was licensed under the BSD license and was initially written in January 2006 by Joe Hewitt, one of the original Firefox creators.[http://www.oreilly.com/server-administration/excerpts/9780596522315/performance-tools.html O'Reilly Performance Tools: Appendix - Even Faster Websites] 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.{{Cite web |date=2017-08-21 |title=Firebug :: Versions :: Add-ons for Firefox |url=https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/?page=4 |access-date=2025-01-15 |archive-url=https://web.archive.org/web/20170821031834/https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/?page=4 |archive-date=21 August 2017 }} 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 implementation called Firebug Lite{{Cite web |url=http://getfirebug.com/firebuglite |title=Firebug Lite Homepage |access-date=2010-11-24 |archive-url=https://web.archive.org/web/20141217201617/http://getfirebug.com/firebuglite |archive-date=2014-12-17 |url-status=dead }} which can be used with Google Chrome.[http://getfirebug.com/releases/lite/chrome/ Firebug Lite for Chrome]

In addition to debugging web pages, Firebug was used for web security testing{{Citation |last1 = Hope |first1 = Paco |last2 = Walther |first2 = Ben |title = Web Security Testing Cookbook |publisher = O'Reilly Media, Inc. |year = 2008 |location = Sebastopol, CA |url = https://archive.org/details/websecuritytesti00hope |isbn = 978-0-596-51483-9 |url-access = registration}} and web page performance analysis."High Performance Web Sites", Steve Souders, CACM, Dec, 2008.

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.{{Cite web|url=https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/|title=Saying Goodbye to Firebug|website=Mozilla Hacks|language=en-US|access-date=2017-10-24}}

Version history

=Version 2.0=

Firebug 2.0 introduced many new features to the Firebug extension including JavaScript syntax highlighting, pretty print for minified JavaScript code, and a DOM Event Inspector to handle all event handlers 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.{{cite web|last=Odvarko|first=Jan|title=Firebug 2.0 Release|url=https://blog.getfirebug.com/2014/06/10/firebug-2-0/|publisher=Firebug Working Group|access-date=15 October 2015}}

=Version 3.0=

On November 10, 2014, Firebug 3.0 was announced and an alpha was made available to the public.{{cite web|last=Odvarko|first=Jan|title=Firebug 3.0 The Next Generation|url=https://blog.getfirebug.com/2014/11/10/firebug-3-next-generation-of-firebug/|publisher=Firebug Working Group|access-date=10 November 2014}} 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.

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.Hewitt, J. (2007). [http://www.drdobbs.com/tools/ajax-debugging-with-firebug/196802787 Ajax debugging with firebug]. Dr.Dobb's Journal, 32(2), 22-26. 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.{{Cite web |url=http://getfirebug.com/whatisfirebug |title=What is Firebug? |access-date=2014-11-13 |archive-url=https://web.archive.org/web/20141222221837/http://getfirebug.com/whatisfirebug |archive-date=2014-12-22 |url-status=dead }} 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.{{cite web|last=Salkosuo|first=Sami|title=Debug and tune applications on the fly with Firebug|url=http://www.ibm.com/developerworks/library/wa-aj-firebug/|publisher=IBM Developer Works|access-date=6 May 2008|date=2008-05-06}} 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.{{cite web|last=Zukerman|first=Erez|title=Debug Web Pages in Firefox With Firebug|url=http://www.pcworld.com/article/247356/firebug.html|publisher=PC World|access-date=6 January 2012|date=2012-01-06}}

=JavaScript Console=

Firebug's script tab enables users to set breakpoints and step through lines of code.{{cite web|last=Suehring|first=Steve|title=Identify JavaScript Problems with Firebug|url=http://www.dummies.com/how-to/content/identify-javascript-problems-with-firebug.html|publisher=Dummies}} 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.{{Cite web |url=https://getfirebug.com/wiki/index.php/Firebug_Extensions |title=List of Known Firebug Extensions |access-date=2014-11-13 |archive-url=https://web.archive.org/web/20141113145221/https://getfirebug.com/wiki/index.php/Firebug_Extensions |archive-date=2014-11-13 |url-status=dead }}