Firebug (software)

From Wikipedia, the free encyclopedia
  (Redirected from Firebug (Firefox extension))
Jump to: navigation, search
Firebug
Firebug logo.png
Firebug extension screenshot.png
Firebug 2.0.1 running in Firefox 30.0 under Windows 7 with the HTML panel active on the main Wikipedia page.
Original author(s) Joe Hewitt
Developer(s) Firebug Working Group
Stable release 2.0.2[1] / July 18, 2014; 8 days ago (2014-07-18)
Written in JavaScript, XUL, CSS
Operating system Cross-platform
Type Mozilla extension
License New BSD License
Website getfirebug.com

Firebug is a web development tool that facilitates the debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript; it also provides other web development tools.[2] Firebug's JavaScript panel can log errors, profile function calls, and enable the developer to run arbitrary JavaScript. Its net panel can monitor URLs that the browser requests, such as external CSS, JavaScript, and image files. The net panel can display both request headers and response headers for each page asset; it can also estimate the time each asset took to load.

Firebug is free and open source; it is licensed under the BSD license.[3] Firebug was initially written in January 2006[4] 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 (add-on) for Mozilla Firefox and a bookmarklet implementation called Firebug Lite.[5] A cross-browser version is in development. Currently, the Firebug add-on has over 3 million active daily users.[6]

In addition to debugging web pages, Firebug is a useful tool for web security testing[2] and web page performance analysis.[7][8]

Overview of features and options[edit]

Console[edit]

Firebug is more than just an alternate version of the Error console. While Firebug is capable of logging errors, warnings and notices, and running JavaScript code, it also has extended Firefox functionality. Firebug allows the user to log errors in Javascript, CSS, XML, XMLHttpRequest (AJAX) and Chrome (Firefox internals), as well as the ability to run Javascript code upon the current webpage. It allows the user to browse code like they would browse the Web meaning that hyperlinks can take them from one view to another. Firebug provides a space to play with a live page in a separate text editor so the user can switch back from the editor to the browser. The user can also modify a page a see the result immediately.

HTML[edit]

In the software’s HTML section, the user may copy inner HTML, create XPath expressions, attach an event observer, delete or edit elements, or move an element in the DOM tab for inspection. The main window of the panel can be used to quickly spot and modify broken code. HTML nodes are constantly being created, modified and removed by JavaScript. Firebug detects these changes and highlights the changes in yellow.

CSS[edit]

The software’s CSS section gives the user the ability to select the desired style sheet, easily modify CSS properties, and easily disable CSS rules. The user can look at the CSS view and figure out why something doesn't look the way they expected it to.

DOM[edit]

The software’s DOM section gives the user a list of all currently selected elements, methods, and properties.

Net[edit]

Using Firebug[edit]

Firebug makes changes immediately and gives the user constant feedback. All editors in Firebug support auto-complete.

The Firebug command line (found at the bottom of the console tab) accepts commands written in JavaScript. The result of executing each command is displayed in the console and they appear as hyperlinks (Example: If the result of a command is an HTML element then the user can click the link and Firebug will take them to the HTML tab).

Users can go back and forth between their external editor and their Firebug editor. They can copy and paste code into the Firebug editor to see how that code will affect the live page and once it is the way they want it, then they can copy and paste it back into their external editor.

[9]

Useful Firebug extensions[edit]

There are a number of necessary and easy extensions that users can put on top of Firebug in order to strengthen their Firebug development experience. The following extensions are open to the public and are now available for online users.

YSlow[edit]

The Firebug extension, YSlow, analyzes the web page and gives ways to improve their performance. These suggestions come from a set of rules that high performance web pages should exude. YSlow is available for Firefox as an add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Firecookie[edit]

Firecookie is a Firebug extension that enables features to examine and regulate cookies in a user’s browser. From the Firebug tool panel, an individual can perform many tasks which include viewing their cookies, creating a new cookie, removing a cookie, filtering and exporting cookies, changing a cookie’s settings, searching for a certain cookie within the browser, and keeping track of cookie events. Firecookie also has a feature on its Console tab that allows one to see a cookie change as an event when a browser page loads.

FireRainbow[edit]

FireRainbow is an extension that provides highlighting for the code. It makes reading and reviewing code much easier.

Pixel Perfect[edit]

Pixel Perfect is a Firebug extension that allows web developers or designers to overlay a web composition on the HTML page. While developing and changing the composition’s switch, a user can then see how many pixels they are off. This improves the accuracy when writing CSS and HTML. This feature also makes it easier because designers have a visual guide of the position and dimensions of the web page components. There are two main Pixel Perfect option menus: the hide statusbar info or the hide overlay when inspecting.

Firefinder[edit]

Firefinder is used to find web page elements that match your search of CSS or Xpath selectors. This tool is great for checking which page elements are affected by a CSS rule.

Inline Code Finder[edit]

FireQuery[edit]

FireQuery allows jQuery expressions to be shown in the Firebug console and DOM inspector. The tool that goes along with this extension is jQuerify and it allows the user to put jQuery into any web page. Accordingly, the HTML tab looks like the image below after an individual runs the JQuery.

SenSeo[edit]

SenSEO is an extension that analyzes a web page and provides feedback about how well it is doing. This tools looks for correct use of tags, the presence of a title, and headings among other things.

Page Speed[edit]

Page Speed is an open source add-on for evaluating web page performance. It gives users suggestions on how they can improve their performance. Feedback consists of suggestions like how to improve the layout of the page, how to make a page more accessible for mobile users, and how to decrease the time it takes to load the page.

[10]

Tips and tricks[edit]

These tips and tricks are useful when debugging and developing.

Magical cd() function[edit]

All of the expressions and functions that can be executed in the command line are relative to the top level window of the page. Firebug provides a solution to this limitation. There are two iFrames within the main container page. Go to the command line of Firebug, open it in multiline mode, type the code into the editor, and click Run. The cd() function is useful when one wants to fire JavaScript code against another window or frame, which is an element of the parent page.

Consoles[edit]

The following two console functions allow users to group the output in the console window: console.group() and console.groupEnd(). console.group() creates a new group in the output console so all of the log, warning, debit, and error statements' output are in a new group.

Shortcuts[edit]

Firebug allows you to configure shortcut keys if the default shortcut keys provided are not preferred. First, find the firebug button in the top left-hand side of the window and click on it to open the Firebug menu. Select Customize Shortcuts. A window with all of the shortcut options will open and the user is able to change the shortcut key combinations for each function listed. Each key in the shortcut combination should be separated by a "+". Firebug also provides a reset button to restore the default key combinations if desired.

See also[edit]

References[edit]

  1. ^ "Firebug 2.0.2". getfirebug.com blog. 2014-07-18. 
  2. ^ a b Hope, Paco; Walther, Ben (2008), Web Security Testing Cookbook, Sebastopol, CA: O'Reilly Media, Inc., ISBN 978-0-596-51483-9 
  3. ^ Firebug Homepage
  4. ^ O'Reilly Performance Tools: Appendix - Even Faster Websites
  5. ^ Firebug Lite
  6. ^ Firebug Statistics: Average Daily Active Users
  7. ^ "High Performance Web Sites", Steve Souders, CACM, Dec, 2008.
  8. ^ Ghita, Marius. "10 Reasons Why You Should Be Using Firebug". tutsplus. Retrieved 16 March 2014. 
  9. ^ Hewitt, J. (2007). Ajax debugging with firebug. Dr.Dobb's Journal, 32(2), 22-26. Retrieved from http://search.proquest.com.proxy.lib.umich.edu/docview/202712580?accountid=14667
  10. ^ Gube, Jacob. "10 Useful Firefox Extensions to Supercharge Firebug." Six Revisions. N.p., 20 June 2009. Web. <http://sixrevisions.com/web-development/10-useful-firefox-extensions-to-supercharge-firebug/>.

Further reading[edit]

External links[edit]