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 / July 18, 2014|
|License||New BSD License|
Firebug is free and open source; it is licensed under the BSD license. Firebug 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 (add-on) for Mozilla Firefox and a bookmarklet implementation called Firebug Lite. A cross-browser version is in development. Currently, the Firebug add-on has over 3 million active daily users.
- 1 Overview of features and options
- 2 Using Firebug
- 3 Useful Firebug extensions
- 4 Tips and tricks
- 5 See also
- 6 References
- 7 Further reading
- 8 External links
Overview of features and options
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.
The software’s DOM section gives the user a list of all currently selected elements, methods, and properties.
Firebug makes changes immediately and gives the user constant feedback. All editors in Firebug support auto-complete.
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.
Useful Firebug extensions
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.
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 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 is an extension that provides highlighting for the code. It makes reading and reviewing code much easier.
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 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
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 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 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.
Tips and tricks
These tips and tricks are useful when debugging and developing.
Magical cd() function
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.
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.
- Flash of unstyled content
- Google Chrome Inspector
- Internet Explorer Developer Tools
- Opera Dragonfly
- Web Inspector
- "Firebug 2.0.2". getfirebug.com blog. 2014-07-18.
- Hope, Paco; Walther, Ben (2008), Web Security Testing Cookbook, Sebastopol, CA: O'Reilly Media, Inc., ISBN 978-0-596-51483-9
- Firebug Homepage
- O'Reilly Performance Tools: Appendix - Even Faster Websites
- Firebug Lite
- Firebug Statistics: Average Daily Active Users
- "High Performance Web Sites", Steve Souders, CACM, Dec, 2008.
- Ghita, Marius. "10 Reasons Why You Should Be Using Firebug". tutsplus. Retrieved 16 March 2014.
- 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
- 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/>.
- Luthra, Chandran; Mittal, Deepak (April 7, 2010). Firebug 1.5: Editing, Debugging, and Monitoring Web Pages (1st ed.). Packt Publishing. p. 224. ISBN 1-84719-496-6.
|This Web software–related article is a stub. You can help Wikipedia by expanding it.|