Skip to content

Latest commit

 

History

History
31 lines (17 loc) · 2.03 KB

devtools-show-console-debug-output.md

File metadata and controls

31 lines (17 loc) · 2.03 KB
Raw

[DevTools] - Show console.debug() output in console

In Chrome (and likely other browsers), console.debug outputs don't appear in the console panel of the developer tools. This is because console.debug outputs are treated as "Verbose" logs, which are not shown by default. Thankfully, it's easy to enable them as shown below.

  1. Click the Default Levels ▾ dropdown in the DevTools console.
  2. Select Verbose
  3. Profit 🎉
Screen.Recording.2022-09-04.at.16.39.49.mov

image

image

image

You can further customize the level of console outputs shown below. This is useful for debugging if you want to focus on a very specific category of message.

Screen.Recording.2022-09-04.at.17.15.37.mov

Details from MDN Docs:

The console.debug() method outputs a message to the web console at the "debug" log level. The message is only displayed to the user if the console is configured to display debug output. In most cases, the log level is configured within the console UI. This log level might correspond to the Debug or Verbose log level.

Why use console.debug() anyway?

This is the 3rd part in a series about the no-console ESLint rule.

  • Part 1 explains the advantages of the no-console ESLint rule.

  • Part 2 explains why you'd want to customize the no-console ESLint rule to allow some console methods (like console.debug()).