Web Development Course:
If you want to analyze diagnostic information on-the-go, we highly recommend you to learn how to open console in Chrome and begin fixing errors in your website!
Chrome DevTools Console: Main Tips
- This tutorial will provide a brief overview of the Console panel of the Chrome Developer Tools.
Console Panel Explained
For starters, the Console panel's interface is quite simple.
Ways to Filter Logs
By default, the Console panel will filter out certain things to display only relevant logs.
However, you might need to see more of them or to analyze specific diagnostic information.
To filter the logs you receive, you have a few options.
Firstly, in the Filter bar, you can enter a keyword. Then it will only display logs that contain the selected word or phrase.
You also have the drop-down located to the right. By clicking on this menu, you can select what kind of messages should be displayed in the Console panel.
By default, it shows messages that fall to the categories of Info, Warning and Errors, and omitts Verbose messages.
For you to understand everything better, we have to explain what these categories mean:
- Info shows output only from
- Warning shows output only from
- Errors shows output only from
- Verbose shows output only from
You can also set the context that console commands execute in. This is done using the drop-down menu on the left.
Once you understand these principles, you might want to use different contexts to get values that only exist in a specific context (separate from the default one or vice versa).
Settings Interface: Change Console Output
You can open the Settings interface for the Console by clicking the cog icon in the upper right corner of the panel.
Here you can modify the console output among a few other things.
Firstly, look at this list, describing each of the options:
- Hide Network: by default, the console displays messages about network issues. With this setting on, the log will not display errors such as 404 or 500.
- Preserve Log: keeps the logs that pop up on the current window throughout navigation and refreshes.
- Selected Context Only: only shows messages from the selected content (top, iframe, worker, extension).
- User Messages Only: only shows messages that are using the API methods for display.
- Log XMLHttpRequests: logs XMLHttpRequests the page makes.
- Show Timestamps: disables message stacking and shows timestamps for each message.
- Autocomplete from History: autocompletes the log based on previous messages.
Chrome DevTools Console: Summary
- This panel is designed to provide diagnostic information about websites. For efficiency, the panel displays the most relevant logs right away.