SEO Implications of FireBug FireFox Addon

SMS Text

Firebug is one of the best FireFox addons I am aware of. While it is primarily meant for tech-savvy web developers, SEOs can also benefit from the tool and here are just a few tips:

Disable CSS style (via CSS tab) selectively: make sure search bots and people browsing your site with CSS disabled can access / see any page element. With Firebug as you mouse over each property, you’ll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on:

Firebug Disable CSS

Advanced Source Code Search:

You can use CTRL+F to search the built-in source code in FireFox but what you can do with FireBug is quite a number of advanced options:

  • search and preview the element right within the code:

Firebug search preview

  • search and edit the source (just click on the element):

Firebug search edit

  • search and instantly see the element on the page (hit “Inspect” tab): firebug-search-inspect.jpg

Firebug search inspect

  • search and copy any HTML element easily: right-click on any element, and you’ll have several options for copying aspects of that element to the clipboard, including its HTML fragment, the value of its “innerHTML” property, or an XPath expression that identifies the element uniquely

Test your site loading time:

Access Net tab: Each file there has a bar which shows you when the file started and stopped loading relative to all the other files.

The bars will teach you things you didn’t even know. For instance, did you know that JavaScript files load one at time, never in parallel. This will help you tune the order of files in page so that the user spends less time waiting for things to show up.

Firebug Load Time

In addition, you’ll be able to see:

  • size of each element;
  • header response for each page element;
  • preview of each element (when hovering over).

Examine the HTTP headers of each element in more detail: click + sign next to it:

HTTP headers contain all sorts of interesting information like the mime type of the file, the type of web server, caching directives, the cookie, and lots more. To see the HTTP headers, just click the arrow to the left of each request to expand it.

Firebug Headers

Easily find on-page errors:

Get both immediate and detailed information about the errors in JavaScript, CSS, and XML. You’ll see a notification icon in your status bar – click it and get details on the error (Console button):

Firebug Errors

Ann Smarty

Ann Smarty

Brand amd Community Manager at Internet Marketing Ninjas
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing,... Read Full Bio
Ann Smarty
Subscribe to SEJ!
Get our weekly newsletter from SEJ's Founder Loren Baker about the latest news in the industry!
  • Mike Gomez

    Interesting article Ann. I’ve always had the FireBug addon but never really fully utilised it / understood it. I also find the ‘Web Developer’ addon for Firefox a very useful tool too.

  • Jordan

    Thanks for the tip! I thought the timing of this article uncanny, as I just posted one myself about the Web Developer plugin:

  • Maddie Weber

    Hi Ann,

    Good post! You might also consider checking out this free toolbar from the SEO Tools –

    and this is one of the first ones I downloaded from the same guys – (specifically for firefox and sits right next to my firebug).

    I haven’t had the time to test either to their full potential yet, but what I’ve seen so far integrates nicely with what you’re suggesting with Firebug.

  • g1smd

    I use it for diagnosing tricky CSS problems.

    It is invaluable to see the styles and classes directly applied to an element, as well as styles inherited from parent elements.

  • Brian

    Thanks for the tips, I have never used firebug in that way before. Only for looking at my css. My site displays ok without css turned on, however it looks horrible.

  • Winooski

    Ann, it’s articles like this –with screen shots o’ plenty– that make Search Engine Journal indispensible. Thanks for helping us dig into FireBug.

  • Ann Smarty

    @Winooski I am happy to be useful 🙂

  • CAP Digisoft Solutions

    Hi Ann,

    I have been using this addon from long back. This is a great tool to analyze the fix the issues in all the way (design, css, javascript, etc).

  • Stef

    Another tool that is worth looking into is the Web Inspector in Safari 3. You can enable the “Develop” menu in Safari’s Advanced preferences…

    A lot of the same features. What I love is the way you can select a certain region of a site and safari will highlight it for you. You can then see the Properties of this region and even the Properties it has inherited. Very handy if you are trying to match your Adsense backgrounds to fit you page in some obscure sidebar or whatever.

  • Tom

    As SEO is being discussed, has anyone used the actual SEO tool for Firefox? There is a nice feature “SEO XRay” that gives a nice snapshot of a sites SEO value but I have not had much time to test some of the other features.

  • Aruna

    hi the infirmation that u gave is really usefull..Can u be more specific in let me know hoe to copy Html Form element from the Firebug .

  • kevin

    how can I disalbe all css ?