Difference between revisions of "Console.log"

From FirebugWiki
Jump to: navigation, search
m (Added Console API to "See also" section)
m (Added categories)
Line 68: Line 68:
* [[Console.error]]
* [[Console.error]]
* [[Console API]]
* [[Console API]]

Revision as of 16:08, 21 November 2013

Writes a message to the console. You may pass as many arguments as you'd like, and they will be joined together in a space-delimited line.

If objects are logged, they will be written not as static text, but as interactive hyperlinks that can be clicked to inspect the object in Firebug's HTML, CSS, Script, or DOM panel.

It also allows you to control the styling of the log message.


console.log(object[, object, ...])



Object to output in the console. This can be any kind of object. The first argument to log may be a string containing printf-like string substitution patterns.

Here is the complete set of patterns that you may use for string substitution:

Pattern Type
%s String
%d, %i Integer (numeric formatting is not yet supported)
%f/%.xf Floating point number; x denotes the number of decimal places the number should be rounded to (if ommitted, the number won't be rounded)
%o Object hyperlink
%c Style formatting


console.log("The", animal, "jumped over", count, "tall buildings");

This prints something like The Object { type="bear", age=2, color="brown", more...} jumped over 4 tall buildings to the console.

console.log("The %s jumped over %d tall buildings", animal, count);

This is equal to the example above with the differences that string substitution is used and that the output will use the toString() method of an object. So the result may be something like this The bear jumped over 4 tall buildings in case toString() of animal returns the string "bear".

console.log("I am %s and I have:", myName, thing1, thing2, thing3);

This is a combination of both techniques. The result of this may look something like this I am Sebastian and I have: Object { name="Firefox"} Object { name="Firebug"} fun.

console.log("%cGreen text on yellow background.", "color:green; background-color:yellow");

This uses the %c pattern, which allows the second argument to be used as style formatting parameter. The output will look like Green text on yellow background..

console.log("%cGreen text on yellow background. %cItalic. %o", "color:green; background-color:yellow", "font-style: italic", object);

Like the example before but with two different stylings combined with an object. The output will then look similar to Green text on yellow background. Italic. Object { what="something"}.

See also