Stats

2388 Contributors: 32 Wednesday, May 10, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

Console

Introduction

A browser's debugging console or web console is generally used by developers to identify errors, understand flow of execution, log data and for many other purpose at runtime. This information is accessed through the console object.

Syntax

  • void console.log(obj1 [, obj2, ..., objN]);
  • void console.log(msg [, sub1, ..., subN]);

Parameters

ParameterDescription
obj1 ... objNA list of JavaScript objects whose string representations are outputted in the console
msgA JavaScript string containing zero or more substitution strings.
sub1 ... subNJavaScript objects with which to replace substitution strings within msg.

Remarks

The information displayed by a debugging/web console is made available through the multiple methods of the console Javascript object that can be consulted through console.dir(console). Besides the console.memory property, the methods displayed are generally the following (taken from Chromium's output):

Opening the Console

In most current browsers, the JavaScript Console has been integrated as a tab within Developer Tools. The shortcut keys listed below will open Developer Tools, it might be necessary to switch to the right tab after that.


Chrome

Opening the “Console” panel of Chrome’s DevTools:

  • Windows / Linux: any of the following options.

    • Ctrl + Shift + J
    • Ctrl + Shift + I, then click on the “Web Console” tab or press ESC to toggle the console on and off
    • F12, then click on the “Console” tab or press ESC to toggle the console on and off
  • Mac OS: Cmd + Opt + J


Firefox

Opening the “Console” panel in Firefox’s Developer Tools:

  • Windows / Linux: any of the following options.

    • Ctrl + Shift + K
    • Ctrl + Shift + I, then click on the “Web Console” tab or press ESC to toggle the console on and off
    • F12, then click on the “Web Console” tab or press ESC to toggle the console on and off
  • Mac OS: Cmd + Opt + K


Edge and Internet Explorer

Opening the “Console” panel in the F12 Developer Tools:

  • F12, then click on the “Console” tab

Safari

Opening the “Console” panel in Safari’s Web Inspector you must first enable the develop menu in Safari's Preferences

safari preferences

Then you can either pick "Develop->Show Error Console" from the menus or press + Option + C


Opera

Opening the “Console” in opera:

  • Ctrl + Shift + I,then click on the “Console” tab

Compatibility

When using or emulating Internet Explorer 8 or earlier versions (e.g. through Compatibility View / Enterprise Mode) the console will only be defined when the Developer Tools are active, so console.log() statements can cause an exception and prevent code from executing. To mitigate this, you can check to see if the console is available before you log:

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

Or at the start of your script you can identify if the console is available and if not, define a null function to catch all of your references and prevent exceptions.

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Note this second example will stop all console logs even if the developer window has been opened.

Using this second example will preclude use of other functions such as console.dir(obj) unless that is specifically added.

Related Examples