if (window.console && window.console.firebug) {
  alert("found Firebug");
}else{
  alert("can't find Firebug");
}

Demo: Sniff for FireBug

You may have noticed this message in your Gmail homepage recently:

The reason for that is Firebug by default logs all XMLHttpRequests made for all the websites you visit. The problem is that the data that is logged never gets disposed of or cleared out. Therefore, FireFox having to collect and store that information and the memory for Firefox will eventually get large enough that will cause your computer to start using paged cache. This will then make Gmail seem like you are swimming through molasses. Gmail by default seems to make 22 XMLHttpRequests when I load the main page. It then makes a new XMLHttpRequest every 30 seconds, to check for new emails, so in the span of 1 hour you will have 120 new Ajax calls tacked on. This is a nice feature of Gmail which makes life simple for its users (Notice there is no “Get new mail” button anywhere). But now every new Ajax call is another 1kb of data which adds to the memory usage and tacks on more CPU and RAM consumed by Firebug.

No need to worry though since, another nice feature of Firebug is that you can disable it on a domain name basis.

To turn off Firebug for mail.google.com first open Firebug by hitting the green icon or F12. Click on the bug icon in the top left and choose the second option labeled “Disable Firebug for mail.google.com”. Now Firebug will be turned off and the green icon will be changed to a silver icon for this domain. You should notice a smoother and faster Gmail experience. You can also turn it back on by clicking on the link “Enable Firebug for this website”.

The other and better method of speeding up your Firefox and still keeping Firebug around, is to disable Firebug all together and enable it for specific sites that you are working on. To disable Firebug, again you click on the Bug icon and this time choose the first option “Disable Firebug”.
Now visit any site that you would like to use Firebug on and then “right click” on the silver icon on the bottom and choose “Allowed Sites…” From here you can add the domain name for any sites you want to override. This makes your life easier and makes general surfing faster in FireFox, yet allows for using the powers of the almighty Firebug when needed.

If your application is similar to Gmail where XMLHttpRequests are called in a loop you may want to use the sniff script to warn users to disable Firebug for your domain as well.

While there are paid services such as Browser Cam that do cross-browser screen captures, I tend to prefer using software since I can fine-tune the results to my liking, and I can see the results immediately.

add-ons via Firefox

ScreenGrab – This FireFox extension installs as an icon in the lower right corner of the he status bar.  This plugin uses the Gecko canvas for faster processing. IT allows for capturing either a selection, the visible window or the entire page. You can customize the options to save either a PNG or JPG image and add a timestamp to the filename, and captures frames and flash files sections without any problems.

PageSaver - This alternate extension from Pearl Crescent installs two new entries in the context menu of FireFox, allowing to save either the visibile portion or the entire page, although it does not allow for saving a selection. It has a slew of options however. For example you can assign a keyboard shortcut which is a great time saver.  You can also set your image filename patterns and choose the format of the saved image. PageSaver can capture frames and flash files.

Windows Software via Internet Explorer

WebShot - You may want to save the screenshot using IE for testing purposes in which case you need to use WebShot which is a tiny executable written in C by Nathan Moinvaziri. It is available in both a GUI format and a command-line format.  WebShot is able to capture any URL and handles frames, and flash files and can also capture java applets. The processing time is somewhat slow for some reason however compared to the other tools. WebShot offers a ton of options when using its command line version.

OSX Software via Safari

webkit2png - is the official command line tool for the Mac which uses python and the WebKit rendering engine, which is used in Safari.

Paparazzi - If you need a simpler GUI try Paparazzi which is a great shell on top of webkit2png, making your life much easier. Paparazzi like PageSaver has many similar options you can set for your captured screenshot images.

Unix Software

khtml2png – is a great command line tool for Unix which uses ImageMagick and libkhtml used in Konqueror to create images from web pages.

To get started, open up firebug using F12 or by clicking its icon in the lower right corner of FireFox. To jump straight to the console and start typing commands you can use the Ctrl+Shift+L keyboard shortcut.

From here you can type commands. Try entering document. This will bring up the document DOM object and you can click on that link to get to the DOM and inspect all of the properties of the document object. A shortcut is also available by typing inspect(document) etc. You can use $ and $$ as in Prototype, such as $(‘firebug’) and inspect($$(‘.firebug’)). Use the up and down arrows to cycle through command history.

• Use console.log and sprintf formatting commands for debugging.
• Use console.info, console.warn and console.error to set your debugging levels.
• Use console.time to log the time your functions take to run.
• Use the error console to view the stack trace of the errors.

You can download Firebug Lite to make these methods work in Internet Explorer. I recommend that you remove your console commands before you go live.

Try Console logging test using console.log You can use sprintf formatting here.

function consoleIntro(){
 var x = "fubar";
 var y = 543;
 console.log("value of x is %s and value of y is %d", x, y);
}

Try Console Error Levels console.info|warn|error

function consoleLogLevels(){
 var a = "This is an info level message";
 var b = "This is a warn level message";
 var c = "This is an error level message";
 console.info(a);
 console.warn(b);
 console.error(c);
}

Try Timer logging console.time|timeEnd

function timeThisTask(){
 console.time("Sample Timer");
 for(x=100000;x>0;x--){}
 console.timeEnd("Sample Timer");
}

Try Error Stack Traces to see stack trace of the errors

function stack1(){
 var d = "fu";var e = "bar";var f = stack2(d,e)
 console.log(f);
}
function stack2(d,e){return stack3(d,e);}
function stack3(d,e){return UndefinedVariable;}

Use the debugger to add breakpoints, debug JavaScript code and step through your code.

There are 3 ways to trigger the debugger:

1. Use the debugger command.
2. Add a breakpoint by clicking on the line number
3. Enable the “Break on All Errors” option for the Script tab.

Try a Deubgger Demo using the debugger command

function debugMe(){
 debugger;
 var g = 1;
 var h = new Date().getMilliseconds();
 while(g < 100){
  g *= 10;
  h -= g;
 }
}

Use the profiler to record detailed statistics on your Script calls and DOM events. This works very much like macros. To manually start profiling click on the profile button in the Console tab. Then try performing some actions on the page. When you are done click on the profile button again. A report is returned which captures the funtions that were called within that time period.

The report output data can be sorted. Own Time tells you how much time each function call took in milliseconds and as a percentage of the total time which can be useful in finding bottlenecks in your code.

Try Manual Profiler test using the manual profile feature

function profileMe(){
 timeThisTask();
 var timerlink = document.getElementById("tabs").
       getElementsByTagName('li')[2].firstChild;
 var typeNode = timerlink.nodeType;
 var nameNode = timerlink.nodeName;
 var valuNode = timerlink.nodeValue;
}

You can also add profilers to your code via the console.profile(“foo”) – console.profileEnd(“foo”) function calls. This can be great when you want to track down events that happen onload.

Try the Coded Profiler using console.profile|profileEnd command

function profiledFunction(){
 console.profile("Test Auto Profiler");
 timeThisTask();
 profileMe();
 console.profileEnd("Test Auto Profiler");
}

You can log calls to a specific function call and see what parameters are being passed to it and how many times it is being called. To do this open the script tab, find your function and right click within it. From the popup menu choose the “log calls to “function name”".

Now whenever that function is called you get a nice message in the console along with the parameter values sent to it.

Try the Logged Function test with logged functions

function callLoggedFunction(){
 for(x=0;x<2;x++){for(y=1;y>0;y--){loggedFuction(x,y);}}
}
function loggedFuction(x,y){
 if(y>x) console.info("y is greater than x");
}

In the HTML tab you can also log events for specific elements. This can be useful when you are creating elements on the fly via the DOM and want to track all the events happening behind the scenes.

The Net tab is quite useful for tracing HTTP request and responses. Network traffic can be filtered by type (HTML, CSS, JS, Images, XmlHttpRequest). The Params tab is very handy and shows you the request parameters in a table format. This is great for tracing your Ajax requests. The issue with this that I found is that once a request is made which leaves the current page you loose the previous pages net events. Maybe a feature for the next version of FireBug?

From the HTML tab you can use the Layout tab to view and edit any element’s offset, margin, border, padding and dimension values on the fly.

In the Style sub tab of the HTML tab you can choose an option to “Show Computed Style” which shows you the final style values of the selected HTML element. Another neat trick is that you can click on any CSS property and edit it inline in real time. You can use the up/down keys and page up/page down keys to change numeric values and see your changes in real time, for example padding etc.

To Install navigate to the script and choose Install User Script from the Tools menu, and Click OK. Next time you visit yahoo.com it should be nicely cleansed of ads.