WebStorm 2020.1 Help

Using interactive Debugger Console

When you are debugging a Node.js application, WebStorm shows two console tabs in the Debug tool window - Console and Debugger Console.

  • The Console tab shows the output of the node process itself, that is, everything that is written to process.stdout and process.stderr directly or is logged using console.*.

    Node.js debugging: Console tab
  • In the Debugger Console, you can run JavaScript code snippets and view the console.* messages.

Run JavaScript in the Debugger 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 Debugger 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.

    Node.js interactive debugger console: applying CSS style to log messages
Last modified: 19 June 2020