PhpStorm 2019.3 Help

Using interactive Debugger Console

When you are debugging a Node.js application, PhpStorm 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, PhpStorm suggests variants for completion.

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

Navigate to source code

  • At each line with output of console.*, PhpStorm 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: 20 February 2020