# 交互式调试器控制台

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` 、  `JavaScript Debugger`  - 插件与 IntelliJ IDEA 捆绑在一起并默认启用。

> **Note:**
> * 交互式 控制台 窗格仅在 [调试应用程序](debugging-javascript-in-chrome.html)或 [调试测试](unit-testing-javascript.html#running-and-debugging-tests)时显示。 在您 [运行应用程序](running-applications.html) 或 [预览网页](editing-html-files.html#ws_html_preview_output) 时不可用。
>
> * JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。

交互式   控制台  窗格显示了您的代码中所有记录的堆栈跟踪和内容（例如，使用  `console.*` ）。

控制台   窗格也是一个  read-eval-print loop  (  REPL )，因此您可以在其中运行 JavaScript 代码片段并与您当前调试的页面进行交互。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_debugger_console_object_shown.mp4)

Procedure: 在控制台中运行 JavaScript

1. 在  `>`  的输入字段中开始键入语句。 在您键入时，IntelliJ IDEA 会提供补全建议。

2. 选择相关语句并按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。 IntelliJ IDEA 在控制台中显示其值。

IntelliJ IDEA 显示对象的预览，因此您无需展开它们。 如果您仍展开某个对象，您将仅查看其自身属性的概览，  `__proto__`  的内容默认处于隐藏状态。

Procedure: 导航到源代码

* 在每一行包含  `console.*`  输出的地方，IntelliJ IDEA 会显示调用所在的文件名和行号。 点击此链接以跳转到源代码中的调用位置。

![JavaScript 交互式调试器控制台：导航到源代码](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_debugger_console_navigate_to_source.animated.gif)

* 控制台   还会显示堆栈跟踪。 点击报告的问题旁的链接，可跳转到发生此问题的代码行。

![JavaScript 交互式调试器控制台：导航到错误](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_debugger_console_navigate_from_stack_trace.animated.gif)

Procedure: 筛选消息

控制台   选项卡以树视图显示对象，且堆栈跟踪默认折叠。 警告  `console.warn()` 、错误  `console.error()`  和信息  `console.info()`  消息具有不同的图标和背景颜色，便于识别。

* 要隐藏特定类型的日志消息，请点击 ![筛选按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.filter.svg) 并选择要筛除的严重性。

![Node.js 交互式调试器控制台：按类型筛选消息](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_debugger_console_filter.png)

Procedure: 群组消息

* 使用  `console.group()`  和  `console.groupEnd()`  分组的日志消息将以树状显示。 要默认折叠输出，请使用  `console.groupCollapsed()` 。

![Node.js 交互式调试器控制台：日志消息分组](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_debugger_console_group_messages.png)

Procedure: 应用 CSS 样式

* 使用 CSS 和  `%c`  标记为日志消息应用样式。

![JavaScript 交互调试器控制台：应用 CSS 样式到日志消息](https://resources.jetbrains.com/help/img/idea/2026.3/js_interactive_console_css.png)

有关详细信息，请参阅 [使用 CSS 设置控制台输出样式](https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css)。