# 查看实际 HTML DOM
> 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:**
> JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。
当您调试客户端代码时， 元素 工具窗口的 调试 选项卡会显示实现实际浏览器页面的 HTML 源代码及其 [HTML DOM 结构](http://www.w3schools.com/js/js_htmldom.asp)。
任何通过浏览器或在编辑器中对页面所做的更改也会立即反映在 元素 选项卡中。
目前，此功能性仅支持 [Google Chrome](https://www.google.com/chrome/browser/desktop/index.html)，且仅在调试会话期间支持。
## 开始之前
Procedure:
1. 请确保在设置中已启用 JavaScript and TypeScript 捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择 `插件` 。 在搜索字段中，键入 JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。
2. 请确保在设置中已启用 JavaScript 调试器 捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择 `插件` 。 在搜索字段中，输入 JavaScript 调试器 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。
3. 安装并启用 Live Edit 插件（在 设置 | 插件 页面上），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。
4. 按照 [配置 JavaScript 调试器](configuring-javascript-debugger.html)中的描述配置内置调试器。
要在不重新加载页面的情况下，将对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中，请启用 Live Edit 功能性。 有关实时编辑功能性的更多信息，请参阅 [在 HTML、CSS 和 JavaScript 中实时编辑](live-editing.html)。
有关更多信息，请参阅 [在 HTML、CSS 和 JavaScript 中实时编辑](live-editing.html)。
## 查看实际页面的 HTML 源代码和 DOM 结构
Procedure:
1. 要开始调试会话，请创建一个 [JavaScript Debug](run-debug-configuration-javascript-debug.html) 类型的运行配置，然后点击工具栏上的 调试 按钮 ( )。
2. 切换到 调试 工具窗口并打开 元素 选项卡。 该选项卡由两个只读窗格组成。
* 文本 窗格显示浏览器中当前打开页面的 HTML 源代码。 一旦在浏览器中的页面做出任何更改（例如，点击一个图标），窗格中的代码就会相应地更新。
* 结构 窗格显示 文本 窗格中 HTML 代码的 DOM 结构。
结构 和 文本 窗格是相互同步的。 当您点击 DOM 结构中的一个节点时，IntelliJ IDEA 将滚动浏览 文本 面板的内容。 窗格也与浏览器同步：只要您在 DOM 结构中或在 文本 窗格中点击一个节点，IntelliJ IDEA 就会在浏览器中高亮显示相应的元素。
3. 若要查看已执行脚本的树状图，请打开 脚本 选项卡。
## See also
### 过程
[在 Chrome 中调试 JavaScript](debugging-javascript-in-chrome.html) [在 HTML、CSS 和 JavaScript 中实时编辑](live-editing.html)