Firebug: Part 1 - console

For this article, I want to start a series dedicated to the beloved Firefox add-on called Firebug.

All cycle: Console , Commands , Debugging , Profiling

I will try to reveal the well-known and not-so-possible features that can be useful to any web developer (or they may not be useful, but this is unlikely).
')
If you don’t have one yet, you can download it from http://getfirebug.com .



All the examples were performed at http://getfirebug.com/index.html , so you can follow me all over.

Let's start with the simple:
Output to the console the string 'Hello World!'.
console.log( 'Hello World!' );


Output to the console the string contained in the variable data.
The advantage of this function is that it shows the file on the right and the line from which it was called.
data = $$( '.bigPara' )[0].firstChild.data;
console.debug( ' ".bigPara" = %s' , data);


If you want to decorate the console, then the following 3 functions for you:
Output to the console total number of links:
(used for informational messages)
links = $$( 'a' );
console.info( ' = %i' , links.length);


Fractional number output to console:
(in life can be useful)
console.warn( ' Pi = %f' , Math.PI);


The output to the console of the object itself ".bigPara", by clicking on which you can see all its properties:
(used for error messages)
console.error( ' ".bigPara" = %o' , $$( '.bigPara' )[0].firstChild);


If you want to display messages in a group, you can do the following:
groupname = ' 1' ;
console.group(groupname);
console.log( " 1 %s" , groupname);
console.log( " 2 %s" , groupname);
console.log( " 3 %s" , groupname);
console.groupEnd();


You can also look inside any object (dir) / element (dirxml)
(unfortunately their site is poor in objects, so we will make our own):
console.dir({a: 'test' , b: function () { return true ;}});
console.dirxml($$( '.bigPara' ));


A small check sometimes also does not hurt:
console.assert(1 === true );


Sometimes you can get lost in the code and to find out all the functions called, paste it in the right place:
console.trace();


You can also measure the time of the operation:
timeName = '100' ;
console.time(timeName);
for ( var i=0;i<100;i++){
console.log(i);
}
console.timeEnd(timeName);


The article is based on the Firebug Console API and the Michael Sync blog .

* This source code was highlighted with Source Code Highlighter .