Interactive debugger console
The interactive Console pane shows you stack traces and everything that was logged in your code (for example, using
Start typing a statement at
>in the input field. As you type, WebStorm suggests variants for completion.
Select the relevant statement and press Enter. WebStorm shows its value in the console.
WebStorm shows previews for objects so you do not need to expand them. If you still expand an object, you get an overview of just its own properties, the
__proto__contents are hidden by default.
Navigate to source code
Filter out messages
The console shows objects in a tree view, with stack traces collapsed by default. Warnings
console.error(), and info
console.info() messages have different icons and background colors to make them easier to notice.
To hide log messages of specific types, click and select the severities to filter out.
The log messages grouped using
console.groupEnd()are displayed as a tree. To show the output collapsed by default, use
Apply CSS styles
Use CSS and the
%cmarker to apply styles to log messages.
See Styling console output with CSS for details.