Firebug (software)

Last updated
Firebug
Original author(s) Joe Hewitt
Developer(s) Firebug Working Group
Stable release
2.0.19 [1] / February 16, 2017;7 years ago (2017-02-16)
Repository
Written in JavaScript, XUL, CSS
Operating system Cross-platform
Type Mozilla extension [2]
License New BSD License [3]
Website getfirebug.com

Firebug is a discontinued free and open-source [4] web browser extension for Mozilla Firefox [2] that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript. [5]

Contents

History

Firebug was licensed under the BSD license [3] and was initially written in January 2006 by Joe Hewitt, one of the original Firefox creators. [6] 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. [7] 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 [8] which can be used with Google Chrome. [9]

In addition to debugging web pages, Firebug was used for web security testing [10] and web page performance analysis. [11]

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. [12]

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. [13]

Version 3.0

On November 10, 2014, Firebug 3.0 was announced and an alpha was made available to the public. [14] 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. [13]

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. [15] 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. [16] 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. [17] Later versions of Firebug allow users to see live changes to the CSS. [13] 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. [18]

JavaScript Console

Firebug's script tab enables users to set breakpoints and step through lines of code. [19] 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. [20]

See also

Related Research Articles

XUL, which stands for XML User Interface Language, is a user interface markup language developed by Mozilla. XUL is an XML dialect for writing graphical user interfaces, enabling developers to write user interface elements in a manner similar to web pages.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

The blink element is a non-standard HTML element that indicates to a user agent that the page author intends the content of the element to blink. The element was introduced in Netscape Navigator but is no longer supported and often ignored by modern Web browsers; some, such as Internet Explorer, never supported the element at all.

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

<span class="mw-page-title-main">DOM Inspector</span> Web development tool

DOM Inspector (DOMi) is a web developer tool created by Joe Hewitt and was originally included in Mozilla Application Suite as well as versions of Mozilla Firefox prior to Firefox 3. It is now included in Firefox, and SeaMonkey. Its main purpose is to inspect and edit the Document Object Model (DOM) tree of HTML and XML-based documents.

<span class="mw-page-title-main">Mozilla Application Suite</span> Discontinued Internet suite

The Mozilla Application Suite is a discontinued cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It was based on the source code of Netscape Communicator. The development was spearheaded by the Mozilla Organization from 1998 to 2003, and by the Mozilla Foundation from 2003 to 2006.

NoScript is a free and open-source extension for Firefox- and Chromium-based web browsers, written and maintained by Giorgio Maone, a software developer and member of the Mozilla Security Group.

Selenium is an open source umbrella project for a range of tools and libraries aimed at supporting browser automation. It provides a playback tool for authoring functional tests across most modern web browsers, without the need to learn a test scripting language. It also provides a test domain-specific language (Selenese) to write tests in a number of popular programming languages, including JavaScript (Node.js), C#, Groovy, Java, Perl, PHP, Python, Ruby and Scala. Selenium runs on Windows, Linux, and macOS. It is open-source software released under the Apache License 2.0.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

A browser toolbar is a toolbar that resides within a browser's window. All major web browsers provide support to browser toolbar development as a way to extend the browser's GUI and functionality. Browser toolbars are considered to be a particular kind of browser extensions that present a toolbar. Browser toolbars are specific to each browser, which means that a toolbar working on a browser does not work on another one. All browser toolbars must be installed in the corresponding browser before they can be used and require updates when new versions are released.

<span class="mw-page-title-main">Stylish (software)</span> User style manager

Stylish is a user style manager that can change the appearance of web pages in a user's browser without changing their content by including user-supplied CSS style sheets with those supplied by the web site itself. The Stylish browser extension includes tools with which to write user styles, and can install user styles written by other Stylish users from a companion website. These user styles may be more or less selective, targeting just one web page, or all of the pages on a domain, or every page on the web.

iMacros Browser-based application for macro recording, editing and playback

iMacros is a browser-based application for macro recording, editing and playback for web automation and testing. It is provided as a standalone application and extension for Mozilla Firefox, Google Chrome, and Internet Explorer web browsers. Developed by iOpus/Ipswitch, It adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. Running strictly JavaScript-based macros was removed in later versions of iMacros browser extensions. However, users can use alternative browser like Pale Moon, based on older versions of Mozilla Firefox to use JavaScript files for web-based automated testing with Moon Tester Tool.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development 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 direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Firefox was created by Dave Hyatt and Blake Ross as an experimental branch of the Mozilla browser, first released as Firefox 1.0 on November 9, 2004. Starting with version 5.0, a rapid release cycle was put into effect, resulting in a new major version release every six weeks. This was gradually accelerated further in late 2019, so that new major releases occur on four-week cycles starting in 2020.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

References

  1. ↑ "Firebug Version History". Mozilla extension . 2017-02-16. Archived from the original on 2017-07-02. Retrieved 2015-08-19.
  2. 1 2 "Mozilla Firefox Add-on". Archived from the original on 2017-04-24. Retrieved 2011-09-27.
  3. 1 2 "Overview of Firebug". Archived from the original on 2014-12-06. Retrieved 2014-11-13.
  4. ↑ Firebug on GitHub
  5. ↑ "Firebug Home Page". Archived from the original on 2014-12-22. Retrieved 2014-11-13.
  6. ↑ O'Reilly Performance Tools: Appendix - Even Faster Websites
  7. ↑ "Firebug :: Versions :: Add-ons for Firefox". web.archive.org. 2017-08-21. Retrieved 2025-01-15.
  8. ↑ "Firebug Lite Homepage". Archived from the original on 2014-12-17. Retrieved 2010-11-24.
  9. ↑ Firebug Lite for Chrome
  10. ↑ Hope, Paco; Walther, Ben (2008), Web Security Testing Cookbook , Sebastopol, CA: O'Reilly Media, Inc., ISBN   978-0-596-51483-9
  11. ↑ "High Performance Web Sites", Steve Souders, CACM, Dec, 2008.
  12. ↑ "Saying Goodbye to Firebug". Mozilla Hacks. Retrieved 2017-10-24.
  13. 1 2 3 Odvarko, Jan. "Firebug 2.0 Release". Firebug Working Group. Retrieved 15 October 2015.
  14. ↑ Odvarko, Jan. "Firebug 3.0 The Next Generation". Firebug Working Group. Retrieved 10 November 2014.
  15. ↑ Hewitt, J. (2007). Ajax debugging with firebug. Dr.Dobb's Journal, 32(2), 22-26.
  16. ↑ "What is Firebug?". Archived from the original on 2014-12-22. Retrieved 2014-11-13.
  17. ↑ Salkosuo, Sami (2008-05-06). "Debug and tune applications on the fly with Firebug". IBM Developer Works. Retrieved 6 May 2008.
  18. ↑ Zukerman, Erez (2012-01-06). "Debug Web Pages in Firefox With Firebug". PC World. Retrieved 6 January 2012.
  19. ↑ Suehring, Steve. "Identify JavaScript Problems with Firebug". Dummies.
  20. ↑ "List of Known Firebug Extensions". Archived from the original on 2014-11-13. Retrieved 2014-11-13.

Further reading

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.