10 Tips to Master the Firebug Console

Sam Deering

Here are some tips so you can start owning that Firebug Console!

If you don’t know what the Firebug Console is then here then start here: What is Firebug and how to set it up.

Tip 1 – How to Hide Annoying Errors

Firebug has options to hide those annoying network errors! (you might see these if your proxy settings are out, if your at work check with your admin that your using the right .pac file). This options menu can also be used to hide other error types. Very useful!
hide-network-errors

Tip 2 – Keyboard Shortcuts

Instead of clicking “run” with the mouse you can Press CTRL+ENTER to run the code that is in the Firebug Console. See a Full List of Keyboard Shortcuts.

Tip 3 – Firebug Console Table

Create a firebug console table – just paste in the code below to check it out!

var table1 = new Array(5);
for (var i=0; i<table1 .length; i++)
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
console.table(table1);

firebug-table

Tip 4 – Console.dir()

The benefit of using Console.dir() instead of console.log() is that on objects, arrays and other types it displays their properties straight up, which can save time. You can simply type dir(nameofobject) into the Firebug Console. I like dir.

console-dir-vs-log

Also to note that “Dir” works without “console.” (but log doesn’t!)

JQUERY4U = {
    url:'http://www.jquery4u.com',
    mainTopics:'jquery,javascript'
}
dir(JQUERY4U); //works without console.
log(JQUERY4U); //doesn't

Tip 5 – Console.debug()

The benefit of using Console.debug() instead of console.log() is that it cuts out all the crap which can get annoying when your trying to debug you JavaScript code. Useful for those who use it frequently, not many do. Love debugging? Read more info on debugging chains

Tip 6 – Create a Quick Bookmarklet

You can create quick bookmarklet of the code in your Firebug Console. Simply press copy > right click bookmark bar > click paste. Job done. Now you can click that bookmark to run the code when you need it, even across browsers for testing purposes.

Some bookmarks to try out:

Tip 7 – Using Firebug NET Panel


Learn how to use the Firebug NET Panel: How to Analyse HTTP Requests using Net Panel, HTTP Fox & Fiddler2.

Tip 8 – Firebug “Add-ons” and Extensions

There are heaps of useful ‘add-ons’ to complement the Firebug Console. See: 10 Extension Plugins to Extend the Firebug Console

Tip 9 – Firebug Console API

console-api
If you didn’t already know there is a Firebug Console API with lots of useful information.

Tip 10 – Checking DOM CSS Styles

In Firebug you can easily check the styles associated with any element thats on the page. Simply right click and inspect that element then switch to the CSS tab. In the CSS tab, any styles that are striked through means that it has been preceded by another style. Remember styles take the following precedence: 1) inline, 2) in-page 3) stylesheet. You can edit the styles live and double click inside the tab to create a new style for that CSS tag.
jquery4y-css-logo-styles

Hope these quick tips helped you learn something you didn’t know about the awesome Firebug Console.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://phpscripts4u.com Simon Funnel

    This is WHY i love this blog so much. Great post man, been trying to get rid of those network errors for sooo long lol.
    – simo

  • Pingback: Aprenda mais sobre o console do Firebug » Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS

  • http://NA Akiii

    Superb article….
    keep educating man..

    Thanks and Regards
    Akiii

  • Pingback: Aprenda mais sobre o console do Firebug

  • Annonymous

    javascript:(function(){function c(){var e=document.createElement(“link”);e.setAttribute(“type”,”text/css”);e.setAttribute(“rel”,”stylesheet”);e.setAttribute(“href”,f);e.setAttribute(“class”,l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;te&&s.heightt&&s.width=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="
    If you are reading this, it is because your browser does not
    support the audio element. We recommend that you get a new browser. “;document.body.appendChild(e);e.play()}function x(e){e.className+=” “+s+” “+o}function T(e){e.className+=” “+s+” “+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp(“b”+s+”b”);for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could
    not find a node of the right size. Please try a different
    page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var
    A=C[L];if(v(A)){O.push(A)}}})()

  • Annonymous

    Try it! U will be annoyed for quite a while

  • Irfan Abdurrasyid

    very usefull this articel. thanks jquery4u