Get Started With Logging Messages In The Console
This interactive tutorial shows you how to log and filter messages in the Microsoft Edge DevTools console.
Messages in the Console
Set up the demo and DevTools
This tutorial is designed so that you are able to open up the demo and try all the workflows yourself. When you physically follow along, you are more likely to remember the workflows later.
Command(macOS) and click Console Log Examples to open in a new tab.
Focus the demo and then press
J(macOS) to open DevTools. By default DevTools opens to the right of the demo.
DevTools opens to the right of the demo
DevTools docked to the bottom of the demo
Browser in a separate window
DevTools undocked in a separate window
Click the Log Info button in the demo.
Hello, Console!gets logged to the Console.
The Console after clicking Log Info
Next to the
DevTools opens the Sources panel after you click log.js:2
Navigate back to the Console using any of the following workflows:
- Click the Console tab.
[(macOS) until the Console panel is in focus.
- Open the Command Menu, start typing
Console, select the Show Console Panel command, and then press
Click the Log Warning button in the demo.
Abandon Hope All Ye Who Entergets logged to the Console. Messages formatted like this are warnings.
The Console after clicking Log Warning
If you want to see the code that caused a message to get logged a certain way, click on a script (such as
log.js:12) to view the code that caused the message to get formatted.
Click the Expand icon in front of
Abandon Hope All Ye Who Enter. DevTools shows the stack trace leading up to the call.
A stack trace
The stack trace is telling you that a function named
logWarningwas called, which in turn called a function named
quoteDante. In other words, the call that happened first is at the bottom of the stack trace. You may log stack traces at any time by calling
Click Log Error. The following error message gets logged:
I'm sorry, Dave. I'm afraid I can't do that.
An error message
Click Log Table. A table about famous artists gets logged to the Console.
birthdaycolumn is only populated for one row. Check the code to figure out why that is.
A table in the Console
Click Log Group. The names of 4 famous, crime-fighting turtles are grouped under the
Adolescent Irradiated Espionage Tortoiseslabel.
A group of messages in the Console
Click Log Custom. A message with a red border and blue background gets logged to the Console.
A message with custom formatting in the Console
console methods. Each method formats messages differently.
There are even more methods than what has been demonstrated in this section. This tutorial shows you how to explore the rest of the methods.
View messages logged by the browser
The browser logs messages to the Console, too. This usually happens when there is a problem with the page.
Click Cause 404. The browser logs a
A 404 error in the Console
Click Cause Error. The browser logs an uncaught
A TypeError in the Console
Click the Log Levels dropdown and enable the Verbose option if it is disabled. You learn more about filtering in the next section. You need to do this to make sure that the next message you log is visible.
Note: If the Default Levels dropdown is disabled, you may need to close the Console Sidebar. Filter by Message Source below for more information about the Console Sidebar.
Enabling the Verbose log level
Click Cause Violation. The page becomes unresponsive for a few seconds and then the browser logs the message
[Violation] 'click' handler took 3000msto the Console. The exact duration may vary.
A violation in the Console
On some pages you see the Console get flooded with messages. DevTools provides many different ways to filter out messages that are not relevant to the task at hand.
Filter by log level
console method is assigned a severity level:
Error. For example,
console.log() is an
Info-level message, whereas
console.error() is an
Click the Log Levels dropdown and disable Errors. A level is disabled when there is no longer a checkmark next to it. The
Error-level messages disappear.
Error-level messages in the Console
Click the Log Levels dropdown again and re-enable Errors. The
Error-level messages reappear.
Filter by text
When you want to only view messages that include an exact string, type that string into the Filter text box.
Daveinto the Filter text box. All messages that do not include the string
Daveare hidden. You might also see the
Adolescent Irradiated Espionage Tortoiseslabel. That is a bug.
Filtering out any message that does not include
Davefrom the Filter text box. All the messages reappear.
Filter by regular expression
When you want to show all messages that include a pattern of text, rather than a specific string, use a regular expression.
/^[AH]/into the Filter text box. Type this pattern into RegExr for an explanation of what it is doing.
Filtering out any message that does not match the pattern
/^[AH]/from the Filter text box. All messages are visible again.
Filter by message source
When you want to only view the messages that came from a certain URL, use the Sidebar.
Click Show Console Sidebar .
Click the Expand icon next to the number of messages. In Figure 21, the number of messages is indicated as 13 Messages. The Sidebar shows a list of URLs that caused messages to be logged. For example,
log.jscaused 11 messages.
Viewing the source of messages in the Sidebar
Filter by user messages
Earlier, when you clicked Log Info, a script called
Error-level message stating that the requested resource could not be found. Messages like that are considered browser messages. Use the Sidebar to filter out browser messages and only show user messages.
Click 9 User Messages. The browser messages are hidden.
Filtering out browser messages
Click 13 Messages to show all messages again.
Use the Console alongside any other panel
What if you are editing styles, but you need to quickly check the Console log for something? Use the Drawer.
Click the Elements tab.
Escape. The Console tab of the Drawer opens. It has all of the features of the Console panel that you have been using throughout this tutorial.
The Console tab in the Drawer
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under a Creative Commons Attribution 4.0 International License.