Chrome Dev Tools: Console Tab

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on August 24, 2015 11:25:07 PM ● Video Link: https://www.youtube.com/watch?v=zMg3PO8MtyI

Duration: 1:44

11,664 views

84

Info and mini-lesson on the 'Console' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/javascript/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 DevTools.

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 ziplines 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.