WebStorm 2019.1 Help

Interactive Debugger Console

The interactive Console pane shows you stack traces and everything that was logged in your code (for example, using console.*).

The Console pane is also a read-eval-print loop (REPL) so you can run JavaScript code snippets in it and interact with the page that you are currently debugging.

Run JavaScript in the Console

  1. Start typing a statement at > in the input field. As you type, WebStorm suggests variants for completion.

  2. Select the relevant statement and press Enter. WebStorm shows its value in the console.

Navigate to source code

  • At each line with output of console.*, WebStorm shows the name of the file and the line where it was called. Click this link to jump to the call in the source code.

  • The Console also shows stack traces. Click the link next to a reported problem to jump to the line of code where this problem occurred.

Filter out messages

The console shows objects in a tree view, with stack traces collapsed by default. Warnings (console.warn()), errors (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 the Filter button and select the severities to filter out.

    Node.js interactive debugger console: filtering out messages by type

Group messages

  • The log messages grouped using console.group() and console.groupEnd() are displayed as a tree. To show the output collapsed by default, use console.groupCollapsed().

    Node.js interactive debugger console: log messages grouped

Apply CSS styles

  • Use CSS and the %c marker to apply styles to log messages.

    JavaScript interactive debugger console: applying CSS style to log messages
Last modified: 16 May 2019