The second tab in the Developer Tools is called the console. The console is where the console statements get displayed. This is usually hidden from the user, it is for developer's eyes only. Open any commercial website like Google or Facebook with the Dev Tools open and you'll probably see at least an error or two. Nobody is perfect!
Use the Console to Debug
When developing projects it is a good idea to log a lot. If your script is not behaving as it should, its probably a good time to start logging the contents of your variables as they are assigned and transformed.
Clean Your Console
Before long, you can find yourself with too much information in the console and one of the handiest ways to limit the amount of information here is to write something in the "Filter" text box. This will filter out any logs that don't match the text that you input there.
See all Your Logs
There is also a sidebar. The icon looks like a tall thin rectangle next to a box with a play button inside it, it is in the top left hand corner. This will show a summary of all the logs, grouping them into different categories. Next to that is a stop sign icon, which will clear all the logs.
Customize Your Logs
In the top right there is a gear icon, the lower one, that belongs to the console, that allows you to customize some aspects of the log. For instance, you can tick the box that says "Preserve log". This will keep any logged messages even if you navigate away from the page or refresh.
You will also see that "Autocomplete from history" is active by default. This can be handy if you are testing commands in the console. Just by pressing the up arrow key, you can recall previous commands.
There is another gear icon in the top right, above the console gear icon, next to the "three dots" menu. This has a whole host of other settings like the theme, panel layout, rulers and more. Have a little play around and see if you can customize it to your liking! Go wild! Remember that you always have a button in the bottom right of these settings called "Restore defaults and reload" that will restore things to how they were set up originally.
Summary: Chrome Developer Tools - Console
- The console is where the
consolestatements get displayed - You should use the console to debug your code
- You can customize your console