Chrome Dev Tools: Console


The Console panel provides two primary functions: logging diagnostic information in the development process and providing a shell prompt which can be used to interact with the document and Dev Tools.

When using the console, you can view raw or structured data by using standard JS statements and console-specific commands.

An example of structured data would be the information returned from an API in JSON. I used this a lot when I was building my first front end development projects for Free Code Camp.

You should know that messages stack up, and you can clear them by typing and entering 'clear()'. You can also save the log by selecting 'Preserve Log'.

There are different commands that will log differently, like console.log() for basic logging, console.error() & console.warn() for 'eye catching stuff'.

The console can track exceptions, which basically means when something goes wrong. It can even pause the code during those exceptions, a function that you might remember from the 'Source' tab.

Check out more in-depth documentation here: developers.google.com/web/tools/javascript/console/