What is console.log?

0 votes
asked Dec 27, 2010 by mihir

What is the use of console.log?

Please explain how to use it in JavaScript, with a code example.

17 Answers

0 votes
answered Dec 27, 2010 by quentin

console.log has nothing to do with jQuery. It is a common object/method provided by debuggers (including the Chrome debugger and Firebug) that allows a script to log data (or objects in most cases) to the JavaScript console.

0 votes
answered Dec 27, 2010 by slaks

console.log has nothing to do with jQuery.

It logs a message to a debugging console, such as Firebug.

0 votes
answered Dec 27, 2010 by poelinca-dorin

It is used to log (anything you pass it) to the Firebug console. The main usage would be to debug your JavaScript code.

0 votes
answered Dec 27, 2010 by mark-byers

Use console.log to add debugging information to your page.

Many people use alert(hasNinjas) for this purpose but console.log(hasNinjas) is easier to work with. Using an alert pop-ups up a modal dialog box that blocks the user interface.

Edit: I agree with Baptiste Pernet and Jan Hančič that it is a very good idea to check if window.console is defined first so that your code doesn't break if there is no console available.

0 votes
answered Dec 27, 2010 by baptiste-pernet

There is nothing to do with jQuery and if you want to use it I advice you to do

if (window.console) {
    console.log("your message")
}

So you don't break your code when it is not available.

As suggested in the comment, you can also execute that in one place and then use console.log as normal

if (!window.console) { window.console = { log: function(){} }; }
0 votes
answered Dec 11, 2011 by tgr

console.log logs debug information to the console on some browsers (Firefox with Firebug installed, Chrome, IE8, anything with Firebug Lite installed). On Firefox it is a very powerful tool, allowing you to inspect objects or examine the layout or other properties of HTML elements. It isn't related to jQuery, but there are two things that are commonly done when using it with jQuery:

  • install the FireQuery extension for Firebug. This, amongst other advantages, makes the logging of jQuery objects look nicer.

  • create a wrapper that is more in line with jQuery's chaining code conventions.

This means usually something like this:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

which you can then invoke like

$('foo.bar').find(':baz').log().hide();

to easily check inside jQuery chains.

0 votes
answered Dec 20, 2011 by jondavidjohn

You use it to debug JavaScript code with either Firebug for Firefox, or JavaScript console in WebKit browsers.

var variable;

console.log(variable);

It will display the contents of the variable, even if it is a array or object.

It is similar to print_r($var); for PHP.

0 votes
answered Dec 20, 2011 by fibericon

You can view any messages logged to the console if you use a tool such as Firebug to inspect your code. Let's say you do this:

console.log('Testing console');

When you access the console in Firebug (or whichever tool you decide to use to inspect your code), you will see whatever message you told the function to log. This is particularly useful when you want to see if a function is executing, or if a variable is being passed/assigned properly. It's actually rather valuable for figuring out just what went wrong with your code.

0 votes
answered Dec 20, 2011 by fred

It will post a log message to the browser's javascript console, e.g. Firebug or Developer Tools (Chrome / Safari) and will show the line and file where it was executed from.

Moreover, when you output a jQuery Object it will include a reference to that element in the DOM, and clicking it will go to that in the Elements/HTML tab.

You can use various methods, but beware that for it to work in Firefox, you must have Firebug open, otherwise the whole page will crash. Whether what you're logging is a variable, array, object or DOM element, it will give you a full breakdown including the prototype for the object as well (always interesting to have a poke around). You can also include as many arguments as you want, and they will be replaced by spaces.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

These show up with different logos for each command.

You can also use console.profile(profileName); to start profiling a function, script etc. And then end it with console.profileEnd(profileName); and it will show up in you Profiles tab in Chrome (don't know with FF).

For a complete reference go to http://getfirebug.com/logging and I suggest you read it. (Traces, groups, profiling, object inspection).

Hope this helps!

0 votes
answered Dec 25, 2012 by outis

console.log specifically is a method for developers to write code to inconspicuously inform the developers what the code is doing. It can be used to alert you that there's an issue, but shouldn't take the place of an interactive debugger when it comes time to debug the code. Its asynchronous nature means that the logged values don't necessarily represent the value when the method was called.

In short: log errors with console.log (if available), then fix the errors using your debugger of choice: Firebug, WebKit Developer Tools (built-in to Safari and Chrome), IE Developer Tools or Visual Studio.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...