JavaScript Console Printing to a browser's debugging console

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

A browser's debugging console can be used in order to print simple messages. This debugging or web console can be directly opened in the browser (F12 key in most browsers – see Remarks below for further information) and the log method of the console Javascript object can be invoked by typing the following:

console.log('My message');

Then, by pressing Enter, this will display My message in the debugging console.


console.log() can be called with any number of arguments and variables available in the current scope. Multiple arguments will be printed in one line with a small space between them.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

The log method will display the following in the debugging console:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Beside plain strings, console.log() can handle other types, like arrays, objects, dates, functions, etc.:

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Displays:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Nested objects may be collapsed:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Displays:

Object { key1: 'val', key2: Array[2], key3: Object }

Certain types such as Date objects and functions may be displayed differently:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Displays:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Other print methods

In addition to the log method, modern browsers also support similar methods:

  • console.info – small informative icon (ⓘ) appears on the left side of the printed string(s) or object(s).

  • console.warn – small warning icon (!) appears on the left side. In some browsers, the background of the log is yellow.

  • console.error – small times icon (⊗) appears on the left side. In some browsers, the background of the log is red.

  • console.timeStamp – outputs the current time and a specified string, but is non-standard:

    console.timeStamp('msg');
    

    Displays:

    00:00:00.001 msg
    
  • console.trace – outputs the current stack trace or displays the same output as the log method if invoked in the global scope.

    function sec() {
       first();
    }
    function first() {
       console.trace();
    }
    sec();
    

    Displays:

    first
    sec
    (anonymous function)
    

Console functions

The above image shows all the functions, with the exception of timeStamp, in Chrome version 56.

These methods behave similarly to the log method and in different debugging consoles may render in different colors or formats.

In certain debuggers, the individual objects information can be further expanded by clicking the printed text or a small triangle (►) which refers to the respective object properties. These collapsing object properties can be open or closed on log. See the console.dir for additional information on this



Got any JavaScript Question?