PyCharm
 
2022.3
Shortcuts: Windows
Get PyCharm
You are viewing the documentation for an earlier version of PyCharm.
  1. Web Development
  2. JavaScript
  3. Debug JavaScript in Chrome
  4. Interactive debugger console

Interactive debugger console

Last modified: 28 September 2022

Available only in PyCharm Professional: download to try or compare editions

Required plugins:

Javascript and TypeScript, JavaScript Debugger -  The plugins are available only in PyCharm Professional, where they are enabled by default.

note

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, PyCharm suggests variants for completion.

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

    https://resources.jetbrains.com/help/img/idea/2022.3/js_interactive_debugger_console_object_shown_light.png
    Gif

    PyCharm 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

  • At each line with output of console.*, PyCharm 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.

    https://resources.jetbrains.com/help/img/idea/2022.3/js_interactive_debugger_console_navigate_to_source_light.png
    Gif

  • 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.

    https://resources.jetbrains.com/help/img/idea/2022.3/js_interactive_debugger_console_navigate_from_stack_trace_light.png
    Gif

Filter out messages

The Console tab 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