Firebug Tutorial: Introduction to Firebug

A Firebug Tutorial

This is an overview of the plugin, not a detailed explanation of all of it’s amazing features. This should be enough to get you started.


Installing Firebug

Firebug works with Firefox. There is a product called Firebug lite which you can include in a file via a javascript call in your file, for use in non-Firefox browsers, but I am not covering Firebug lite in this tutorial/overview.

To install Firebug visit the Firebug download page. Click on the huge orange button half-way down the page on the right hand side. You can also download it from Mozilla’s FireFox Add-ons site. Install it. Restart FireFox, and you’re good to go.

If you’ve already installed it, get the latest version! To update your extension, in Firefox select Tools > Add-ons. Then click on the button in the left hand bottom corner that reads “Find Updates”.

Opening and Closing Firebug

Keyboard and Mouse Shortcuts for Firebug can be found at the Firebug Website. The three sets I use most often include:

  • Open Firebug: F12 or clicking on the green check mark at the right of the right of the browser status bar.
  • Close Firebug: 12 or clicking on the green check mark at the right of the right of the browser status bar or clicking on the red x in the upper right hand corner of the firebug window.
  • Undock Firebug into its own window: click on the red up arrow in the top right corner of the firebug window or Ctrl+F12 / ⌘+F12.

Firebug settings

  • Set Firebug to always undock in a separate window: open the firebug console. right click on the firebug in the upper left, select “options”, then select “Always Open in New Window”
  • Increase/Decrease font size: open the firebug console. right click on the firebug in the upper left, select “Text Size”. The font changes are really slight, but it does work.
  • Set Firebug to only work for specified sites: Start by disabling Firebug by right clicking on the green check mark and selecting “disable Firebug”. Then right click on the greyed out icon and add the domains you want to enable Firebug on.

Firebug Window Overview

  • Console Tab: Contains command line javascript, shows javascript error message log, can enter JavaSript commands after the >>> at the bottom
  • HTML Tab: Shows HTML as an indented hierachy of DOM nodes, which you can open and close to see or hide child nodes.
  • CSS Tab: CSS inspector, view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Edit”.
  • Script Tab: Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Inspect”. Set breakpoints and conditions underwhich break points appear.
  • DOM Tab: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
  • Net Tab: Shows all the downloads, how long each resource took to download, the HTTP request headers and server response sent for each resource. The XHR tab is useful for AJAX debugging.

Edit your document on-the-fly.

You can change text nodes by selecting the text node with the “inspect” function and then clicking on the text node in the HTML panel.

Firebug is both an inspector and an editor. All objects in the HTML, CSS and JavaScript files can be edited with a single or double click. As you type, the changes are immediately applied in the browser window providing instant feedback. The DOM inspector allows for full in-place editing of your document structure, not just text nodes. Simply click on the “edit” tab next to the “inspect tab”, and the left panel becomes a black and white text editor. In the CSS panel, Firebug autocompletes as you type. In the DOM inspector, Firebug autocompletes property names when you hit the Tab key.

Inspecting and troubleshooting CSS using Firebug

DOM inspector’s CSS tab reveals all applicable CSS rules for elements, including properties inherited from ancestor elements, lets you toggle on/off and edit individual style declarations and add new CSS rules.

Firebug hides rules that Firefox ignores: For example, Firebug will hide hacks targeting other browsers and CSS3 selectors that it doesn’t support. So, it will both hide intentional CSS filters, such as _height:25px; (the underscore is an IE6 hack) and p:first-of-type {color: #ff0000;} (a CSS3 :first-of-type pseudo-class selector currently supported only by Safari 3). This means, however, that if the reason your page isn’t looking the way you anticipated is because of a typo, you will need to use the developer toolbar to show all CSS and find your error.

Firebug shows all selectors impacting the selected element: When you inspect an element or node, Firebug displays the entire cascade of all the CSS attributes impacting that element, including attributes that were overwritten in the cascade. The right panel displays the selectors and attributes impacting the element in order of the cascade.

Firebug allows you to turn off styles impacting an element within the CSS: When you turn off an attribute, if that attribute value was overriding a different value in the cascade, the formerly crossed out value will become active so you can test what the page would look like if the attribute value were removed. To “turn off” an attribute, click to the left of the attribute in the right hand panel. A red “do not” icon do not will appear, and the attribute will be grayed out or disappear, and the strike-through of the new attribute value effecting the element from the cascade will be removed. You can toggle the attribute value back on by clicking on the do not. However, if the attribute has “disappeared” since it’s been overwritten, you have to re-inspect the element to see the missing attribute and toggle it back on.

Firebug allows you to edit attributes and attribute values: To change an attribute or the value of an attribute, click on the term or value, and edit it. Pretty simple! The effect of the change will be immediately visible in the browser window.


One of the best components of this feature is figuring out exact positioning, padding and margins. Firebug provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard, or click on the up or down arrow to increment or decrement the value by one.

Firebug allows you to add new attribute / value pairs to existing selectors: To add an attribute to a selector, double click on the selector. An input box with intelli-sense will appear. Hitting tab will bring you to a value text input box.

Firebug allows you to easily inspect ancestor elements: To the right of the keyterm “inspect”, Firebug displays all the ancestors of the currently selected element. To inspect an ancestor, simply click on it in the list. The left and right panels will both change to display the properties of the newly selected element.

The Box Model: Evaluating Height, Width, Padding, Border and Margin

When you inspect an element, the left panel displays the HTML, and the right panel shows the CSS. Next to the CSS label at the top of the right panel is a tab labeled “Layout”. This Layout tab illustrates the CSS box model as it applies to the selected element. To view the height or width of any other element on the page, simply select “inspect” while this window is open and hover your mouse over the inline or block level element you wish to inspect.

Evaluating download speed

The Net tab graphs the request times for all http requests that make up a page. Network monitoring must be turned on for the Net Tab to work, but it’s on by default (the options drop down on the right hand side of the firebug panel allows you to toggle this feature off and on). This is a handy way to test (and prove) that putting your javascript files at the bottom of your files, especially for javascript heavy pages, improves perceived download time. Total download time will be the same, but since browsers stop loading pages when they hit scripts until the scripts have been downloaded, the page will appear to download faster, which is a better user experience (see list item 5).

By left clicking on the plus sign to the left of the file name, Firebug displays the HTTP headers of each file that was downloaded.

In the 1.0..5 version of Firebug you can see how long it takes for HTML files only to be downloaded, CSS files only, images only, etc., or all files. YSlow, Yahoo!s performance tool, should be available as a plug in for Firefox by the end of the summer. In the meantime, Firebug’s Net tab is the next best thing.

JavaScript

The DOM inspector provides information about all the properties of all the objects in your document. The coolest feature of Firebug is that while making dynamic updates to your page will not alter the content visible in the “view source” feature of the browser, it will update the content in the Firebug panels. So, dynamically created content is visible not only in the browser (as it should be), but the generated code is inspectible (is that a word?) in Firebug.

The JavaScript profiler reports on the execution times of your JavaScript functions, so you can pin down performance JavaScript components that are slowing down your pages or javascript applications. To view the profiler, the submenu should be on “console”, and click on “Profile” in the top menu (the order of the tabs is “Inspect |Clear | Profile”). Firebug lists all the functions that were called and the time spent for each function call. You can target what function you want Firebug to profile by adding console.profile([title]) to the start of the section your want profiled, and console.profileEnd() at the end.

The command line at the bottom of the console tab, which starts with “>>>” accepts commands in JavaScript. The results or your javascript command, if there are any, are then displayed in the console. There is a Firebug Command Line API that is worth taking a look at.

AJAX

As mentioned above, Firebug captures dynamic content and other DOM changes made to your webpage. If you take as an example the sample file created in my tutorial Beginning AJAX using the YUI Library, if you check the view source after calling the function (click on the link) via the browser’s functionality, you’ll only get the link that calls the AJAX function. If you view the source via Firebug, Firebug reflects changes made to the DOM, and includes the “Hello World” content. This is one of the core strengths of Firebug: without Firebug, AJAX requests and responses are invisible. With it, you can view the sent and received text as well as the headers that went along with it. You can also monitor how long it took for each request/response with the Net tab.

You can see XHR response by clicking on the Net tab, and then the XHR tab in the sub navigation that opens up when you are in the Net view. While the All Net tab is like yslow, the XHR focuses on the AJAX only. If you click on the plus sign to the left of the response file, you can see both the headers and the content of the response.

Details of the Net tab’s XHR sub-tab

When a request is made to the server via a XMLHttpRequest object, Firebug logs the POST or GET request, the response headers and the raw text of the response. To view this data, click on the Net Tab’s XHR sub-tab. This will show a list of the calls and the time it took for the response. To the left of the request click on the + or simply click on the request (it is a link). Three tabs will appear in the case of a GET request, four for a POST:

  • Params: Displays the name/value pairs of the request URL
  • Headers: Displays requestion and response headers
  • Response: Shows the actual data received from the server as it was received.
  • Post. Displays the data sent to the server from a POST request (tab only shows for POST requests, not GET requests).

These four tabs are useful in development and debugging. Check the POST and Params tabs to ensure your request are being correctly posted. Check the Response to determine the format of the response and ensure that your JavaScripts are written to handle that formatting. If you don’t control the feed that you are fetching, you can copy and paste the response into a text editor, format it so it’s human legible, and work that way.

Debugging AJAX and other JavaScripts

To debug AJAX, it’s similar to how you debug JavaScript above, except for the console.log is even more helpful, since you are reloading components of the page and not the whole page (reloading the whole page resets the HTML, JS and CSS to what is defined in the static files). Firebug provides the console object that has several methods usable for logging. Properties of console object include console.debug, console.info, console.warning, and console.error. When one of these methods produces an output, Firebug links to the line causing the output so you can quickly find the responsible code.

One of the other ways to debug is to set breakpoints (yay! no more alerts!). The “Script” tab allows you to pause execution on any line. Clicking on the line number in the script tab sets a breakpoint. You can make that breakpoint conditional by setting a statement that if true will trigger the breakpoint. Simply right click to the left of the line number to set an expression (where you had left clicked to set the breakpoint) or right click on the line and select “Edit breakpoint condition”: “this breakpoint will stop only if this expression is true” is the message you should see. You can contine, step over, step into or step out of a line. The right panel has a “watch” tab where you can inspect the value of local variables (click on objects to view their properties). Hovering over an object in the script activates a tooltip that displays the object’s properties.

Problems with Firebug

Webpages never finish loading: likely because there is a javascript error in the page, and Firebug has put a breakpoint at the error and halted the script.

Firebug crashes my Firefox some of the heavier Web 2.0 sites that I visit, like Netflix and Yahoo! Mail. Firebug keeps track of all the errors. This can use up a lot of memory and crash the browser. Also, likely irrelevant, but SoThink SWF makes Firebug crash FF.

Solutions:

Disable Firebug for a particular domain: Unless you develop for a site that crashes your browser, you can simply turn off Firebug for a domain/subdomain.. To turn off Firebug, right click on the green check mark (or red x if there are errors) in the status bar and select “disable firebug for thisserversname.com”.

Disable Network Monitoring: Sometimes disabling Firebug for a particular domain is not an option . For example, I code a small part of a much larger internet application which throws errors and therefore never finishes loading, but disabling Firebug is not an option since I am working on that page.. To resolve this issue, click on the Net tab. When on that tab, to the far right you will see “options”. Select “Disable Network Monitoring”. Since I have selected that, I no longer crash my Firefox, and can work on the website I need to work on. (I did update my Firebug, and that might have helped the issue too. Not sure.)

Update Your Version of Firebug: Firebug is continuously being updated and bugs are being fixed. To update to the latest version of Firebug, in your FF browser window select Tools > Add-Ons > Find Updates, and FF will check for and install upon request, the most recent release of Firebug and all of your other FF extensions.

Notes:

  • Firebug 1.05 and earlier do not work with Firefox 3.0, currently in beta
  • Joe Hewitt developed Firebug and offers it for free. Consider giving him some love in the form of money.
  • For more in depth view, view Joe Hewitt: Welcome to Firebug which I included below. The above tutorial is more of what you definitely need to know. The video covers the more advanced features. Take a look at it if my overview doesn’t provide enough info, especially in the area of JS debugging and XHR debugging.
This entry was posted in Accessibility, Browsers, Character Entities, firebug, JavaScript, Web Development. Bookmark the permalink.

40 Responses to Firebug Tutorial: Introduction to Firebug

  1. jasonw22 says:

    Great post!

  2. GuidoSan says:

    Thanks a lot! That was a wonderful introduction. Very useful for a novice like myself.

  3. gagan says:

    This is awesome!

  4. Mitch says:

    Great extension and a great post; very helpful.
    Thank you!

    Mitch

  5. David says:

    Thank you!

  6. Aadi says:

    I dont find more words to praise this genious who gifted the Firebug to web world. Thanks a TON .

  7. Estelle says:

    Added note to Yahoo! Mail crashing Firefox when you have Firebug installed: According to the team of engineers at Yahoo!, this issue has to do with the number of iFrames in the Web 2.0 version. So, while it is a Firebug issue — Firebug can’t handle so many iFrames — perhaps if Yahoo! Mail were a leaner application this issue could be avoided.

  8. Fred Riley says:

    Thanks, Estelle – that’s a stunningly useful post. I’ve had Firebug installed for a while following glowing recommendations, but needed a clear and concise introduction to understand how it can be used, and in what situations. This is just the job.

  9. Echo says:

    The screen for demonstration in the viedo is not readable.

  10. Pingback: Olaf's Thoughts About Development » Tracing web applications with Fiddler or FireBug

  11. Storm says:

    Thanks alot for the tutorial Estelle, much appreciated :)

  12. AtlantaKid says:

    What a wonderful wonderful tool FIREBUG is. I have tried it today after I became desperate for quick fix on a hot project. I am saved big time.

    thank you so much,

  13. Yogita says:

    Awesome,

  14. Rolf says:

    This is really a great Introduction! Thanks very much.
    Yes, I am late, but someone has to put some meaningful comment
    between these spam comments of the last months.

    I am especially thankful for the hint on the XHR. Frankly I had
    no clue, what the abbreviation could mean. And I am delighted to
    see that there is one more person out there, that doesn’t run the
    browser in maximized mode and hence suggests to have firebug in a
    window on its own.

    Also I want to add a guideline: Have the “Disable Firebug” setting
    in the menu turned off only in the first week after installation.
    Then after you are familiar with it generally disable Firebug for
    all sites and only keep a positive exclusion list of the 10 or 15
    sites, that you are really interested in.

    If you happen to read this Tutorial in the first week, you don’t
    need to wait until the week is completed to only enable Firebug
    for assorted allowed sites ;-)

    One more note: I have often wondered why people use so many of the
    web-Developer add-ins of Firefox. Most of the features could be
    reached in the DOM Inspector, as well. Maybe with 1 or 2 more mouse
    clicks. It’s like that I never use the escalator to get to the first
    or second floor if there are staircases. But Firebugs brings me to
    the 10th floor … and in that case I jump into the escalator.
    All the dynamic Javascript Content that is “inspectable” in Firebug
    makes the difference.

  15. Steven says:

    I’m having difficulty getting the changes that I make to my blog actually stick. I can tweak the code in either CCS or HTML. But then, it seems to disappear when I reload the page or switch to a different page.

    I might be doing something wrong. I really can’t figure out how or why. I’m on a Mac using Firefox with Firebug split below, if this makes a difference. I don’t see the “disable Firebug” setting any where in the interface.

    I’ve worked a number of hours of work on my blog only to see it disappear.

  16. Estelle Weyl says:

    Steven-

    When you edit using Firebug, your edits will only be in Firebug, which is client side. You need to copy your edits into your CSS file and post them to your server for them to be permanent. Firebug is a debugging/troubleshooting tool, not an editor.

  17. chandana das says:

    Thanks a lot for this article.
    It helped me a lot.

  18. Sekhar says:

    This is really a gud introducton.

  19. Ed Podowski says:

    Steven Wrote:

    When you edit using Firebug, your edits will only be in Firebug, which is client side. You need to copy your edits into your CSS file and post them to your server for them to be permanent. Firebug is a debugging/troubleshooting tool, not an editor.

    If this is not an editor why does it say “Open With Editor?” I have been searching for more than 2 hours trying to figure out what I am missing because I could not save the edit page.

    In addition, something should tell you how to save the edited html page to upload to the server.

    This is truly misleading and frustrating to the beginner.

    I must say I was very impressed with Firebug, but not being able to save your work easily is poor programming.

    Firebug Dead!

  20. Estelle Weyl says:

    Hi Steven-

    You can actually save your Firebug edits, if you edit using the edit functionality. Then you can highlight all, copy and paste.

    Firebug displays what the browser is currently rendering. It computes for you what many lines of CSS combined is now rendering, and displays what the javascript has dynamically rendered. This is incredibly powerful. While you can copy and paste and save, what you would be copying and pasting is rendered code, not dynamic, which is unlikely what you want. You can save your edits. And saving those edits is a little convoluted. But saving edits is not the power or the purpose of Firebug. Firebug’s strength and importance is in helping you analyze and debug what is rendered. It’s purpose is NOT to replace Dreamweaver.

  21. Jara Tyr says:

    I am continually stunned by all of you in the “Open Source” world. You obviously are wonderful people who contribute fantastic things. Why though is it only an inbred socially closed community? This site, and the Firebug effort, is just one instance. Doesn’t it seem odd to any of you that nobody tells anyone outside your community what these product do? Why you need it? What problem it solves? An overview of the actual features? I did see the word “Overview” in the heading on this site. But there is no overview. Just “press the F12 and something happens”. Early in my career I was a Marketing Director (when marketing was marketing and not just sales) then moved to Wall Street to be Chief Application Architect of many Fortune 100 companies. I just don’t get why you all don’t want wider acceptance and awareness of your work. It’s such a widespread phenomena. I personally would love to help. Yet it seems this total whiteout of this space in your world indicates I would have to engage a major Change Management effort to even begin. Don’t think I am being cruel. I’m 100% on your side. On a personal level I’m sure there are some great applications that I should be using. But have no idea, beyond their names, and latest version bug fixes, what they do and how I would integrate them into my daily routine. Many times I install them to try and figure it out. But my time is worth to much to spend playing around like that. OK, I do live in Manhattan. We value time more here. I personally use Joomla! on 5 different sites that I feel are well constructed and spend about 5 hours a day researching technology and business on the Web. So, I am not a novice at what you are doing. I also bring many Open Source applications into corporations and small business. Such as ESB’s Databases, SOA and many other segments. I really would like to understand this very strange and seemingly unfortunate (for the world) social mores (Latin for social norms). – Jara

  22. Estelle Weyl says:

    Jara-

    Thank you for your comment. We’re not a “socially closed community,” we’re a professional community. This blog is geared toward experienced web developers.

    You are correct about some of the wonderful resources. They’re unintentionally kept as secrets since the developers are just that — developers — not marketeers.

    perhaps i should have written “this is an overview of the features of firebug”. I assumed that if people were looking for tutorial on Firebug know what it is.

    i do write for community mx at a much more introductory level. To find out more about The “what” of Firebug, check out http://www.communitymx.com/abstract.cfm?cid=6B0D6

  23. Chris says:

    Estelle,

    I just wanted to say thank you for this tool. I have spent atleast 30hrs trying to figure out where a certain item inherited it’s properties from (I’m dealing with Joomla and embedding apps). It took me 15mins with your awesome tool. The first 12 mins was just getting aquainted with it! :)
    Not webmaster should be without it!

    Chris

  24. Estelle Weyl says:

    Thanks Chris, but I can’t take credit. Joe Hewitt originally created Firebug, and now the Firebug working group. I just try to help everyone get up to speed on it.

    -Estelle

  25. Abdul Aziz says:

    Great post.. I have been using firebug for like.. 1 year now. Its reduced my bug fixing time by half… Thanks a million.. :)

  26. Joe Seliya says:

    Thanks Estelle, valuable information. Just a quick question: I am a newbie with crawling and parsing and came across firebug to view dynamic content esp. javascript etc. How can I view the content or extract the content of a specific javascript onclick function that displays a bunch of links, using firebug?

  27. Tom says:

    Hey Estelle I thought your readers might appreciate this firebug tutorial to supplement your excellent tutorial, although with the new firebug release it may need updating: http://www.digitalmediaminute.com/screencast/firebug-js/

  28. greggT says:

    Although generated *content* is inspectible, I cannot figure out how to show the CSS that triggers changes to content, eg
    #column2:before { content:”Article ” }
    in Firebug’s Style box.
    Do you know how?
    -g

  29. [..] A bit unrelated, but I totally liked this blog post [..]

  30. Thanks Estelle. Your Firebug intro has been very helpful. Am just getting onboard with CSS, showing that you’re never too old to learn new skills. Sadly , I missed SXSW (and I live here!) Hope you made the cut!

  31. Pingback: Private Message form - friends list

  32. Pingback: Tìm hiểu về firebug

  33. David Kempton says:

    Thanks for the document – to answer your aside-comment, it’s “inspectable”…

  34. Ioannis says:

    Wow! What a great post. Thanks a lot. I just have one question. On the right panel, where the style is shown when viewing the HTML tab, you can also see the files to which the code belongs. But the topmost entry, element.style, does not have a file reference. How can this file be found so that changes can be applied? Thank you for your time and effort.

  35. Estelle Weyl says:

    @Ioannis

    The element.style refers to inline style, which could be inline style in your original HTML file, or inline style added by javascript. Since it is ‘inline’, there is no external CSS reference for it. Hope that makes sense.

  36. Ioannis says:

    Thanks Estelle. You’ve just opened up new roads for me – unknown but that’s what learning is about. Wish you luck.

  37. brycey says:

    This is new to me and this will be a big help in my work though I’m still getting use to it. Thanks!

  38. Wow! What a great post. Thanks a lot. I just have one question. On the right panel, where the style is shown when viewing the HTML tab, you can also see the files to which the code belongs. But the topmost entry, element.style, does not have a file reference. How can this file be found so that changes can be applied? Thank you for your time and effort.

  39. Jason says:

    Hi
    I’m pretty new to this Firbug app.
    I can make the changes on my site on the fly, but how I go round making sure the changes stay? Or does one need to export the changes done and then load it? And if so, how does on do that?

    Jason

  40. udipp says:

    Good article, but I agreed with Tom that the article should be compatiable with latest version of Firebug. Here is a reference of Firebug tutorial covering latest version. Thanks.
    http://www.w3resource.com/web-development-tools/firebug-tutorials.php

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>