If you’re plagued by repeating messages in Console, Ted Landau has some tips for dealing with the problem. Get rid of repeating messages in Console. I cannot say for sure that these.
This interactive tutorial shows you how to log and filter messages in the Chrome DevTools Console.
This tutorial is designed so that you can open up the demo and try all the workflows yourself.When you physically follow along, you're more likely to remember the workflows later.
Optional: Move the demo to a separate window.
Focus the demo and then press Control+Shift+
Optional: Dock DevTools to the bottom of the window or undock it into a separate window.
Click the Log Info button in the demo.
Hello, Console! gets logged to the Console.
Next to the
Navigate back to the Console using any of the following workflows:
Console, select theShow Console Panel command, and then press Enter.
Click the Log Warning button in the demo.
Abandon Hope All Ye Who Enter gets logged to the Console.Messages formatted like this are warnings.
Optional: Click log.js:12 to view the code that caused the message to get formatted like this, and then navigateback to Console when you're finished. Do this whenever you want to see the code that caused a message to getlogged a certain way.
Click the Expand icon in front of
Abandon Hope All Ye Who Enter. DevToolsshows the stack trace leading up to the call.
The stack trace is telling you that a function named
logWarning was 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 can 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.
Click Log Table. A table about famous artists gets logged to the Console.Note how the
birthday column is only populated for one row. Check the code to figure out why that is.
Click Log Group. The names of 4 famous, crime-fighting turtles are grouped under the
Adolescent Irradiated Espionage Tortoises label.
Click Log Custom. Adobe after effects tnt. A message with a red border and blue background gets logged to the Console.
console methods. Each method formats messages differently.
There are even more methods than what has been demonstrated in this section. At the end of the tutorialyou'll learn how to explore the rest of the methods.
The browser logs messages to the Console, too. This usually happens when there's a problem with the page.
Click Cause 404. The browser logs a
Click Cause Error. The browser logs an uncaught
Click the Log Levels dropdown and enable the Verbose option if it's disabled. You'll learn moreabout filtering in the next section. You need to do this to make sure that the next message you logis visible.
Click Cause Violation. The page becomes unresponsive for a few seconds and then the browser logsthe message
[Violation] 'click' handler took 3000ms to the Console. The exact duration may vary.
On some pages you'll see the Console get flooded with messages. DevTools providesmany different ways to filter out messages that aren't relevant to the task at hand.
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 acheckmark next to it. The
Error-level messages disappear.
Click the Log Levels dropdown again and re-enable Errors. The
Error-level messages reappear.
When you want to only view messages that include an exact string, type that string into the Filter text box.
Dave into the Filter text box. All messages that do not include the string
Dave are hidden.You might also see the
Adolescent Irradiated Espionage Tortoises label. That's a bug.
Dave from the Filter text box. All the messages reappear.
When you want to show all messages that include a pattern of text, rather than a specific string, use aregular expression.
/^[AH]/ into the Filter text box. Type this pattern into RegExr for anexplanation of what it's doing.
/^[AH]/ from the Filter text box. All messages are visible again.
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 12 Messages. TheSidebar shows a list of URLs that caused messages to be logged. For example,
log.jscaused 11 messages.
Earlier, when you clicked Log Info, a script called
Error-level message stating that the requestedresource could not be found. Messages like that are considered browser messages. You can use the Sidebarto filter out browser messages and only show user messages.
Click 9 User Messages. The browser messages are hidden.
Click 12 Messages to show all messages again.
What if you're editing styles, but you need to quickly check the Console log for something? Use the Drawer.
Press Escape. The Console tab of the Drawer opens. It has all of the featuresof the Console panel that you've been using throughout this tutorial.
Congratulations, you have completed the tutorial. Click Dispense Trophy to receive yourtrophy.
consolemethods that weren't covered in this tutorial.