转到 Inspect Element 模式，然后点击元素。
删除 DOM 节点
要删除 DOM 节点，请执行以下操作：
- 打开 more actions 菜单并选择 Delete Node。
- 选择节点并按 Delete 键。
注：如果您意外删除了节点，按 Ctrl + Z（Mac 上为 Cmd + Z）可以撤消您的上一步操作。
显示 more actions 菜单
利用 more actions 菜单，您可以通过多种方式与 DOM 节点交互。 要查看该菜单，请右键点击节点，或者选择节点，然后按 more actions 按钮 (
))。按钮仅在当前选定的元素上显示。
滚动到视图
悬停或选择 DOM 节点时，渲染的节点将在视口中突出显示。 如果节点滚动到屏幕以外，在节点位于当前视口上方时您将在视口顶部看到提示，而在节点位于当前视口下方时，您将在底部看到提示。例如，在下方的屏幕截图中，DevTools 指出 Elements 面板中当前选定的节点位于视口以下。
要滚动页面使节点在视口中显示，请右键点击节点并选择 Scroll into View。
设置 DOM 断点
设置 DOM 断点以调试复杂的 JavaScript 应用。例如，如果您的 JavaScript 正在更改 DOM 元素的样式，请将 DOM 断点设置为在元素属性修改时触发。在发生以下一种 DOM 更改时触发断点：子树更改、属性更改、节点移除。
子树修改
添加、移除或移动子元素时将触发子树修改断点。例如，如果您在 main-content 元素上设置子树修改，以下代码将触发断点：
var element = document.getElementById(‘main-content‘);
//modify the element‘s subtree.
var mySpan = document.createElement(‘span‘);
element.appendChild( mySpan );
属性修改
动态更改元素的属性 (class, id, name) 时将发生属性修改：
var element = document.getElementById(‘main-content‘);
// class attribute of element has been modified.
element.className = ‘active‘;
节点移除
从 DOM 中移除有问题的节点时将触发节点移除修改：
document.getElementById(‘main-content‘).remove();
与 DOM 断点交互
Elements 和 Sources 面板均包含一个用于管理 DOM 断点的窗格。
每个断点都会列出元素标识符和断点类型。
可通过以下方式之一与列出的每一个断点交互：
- 悬停在元素标识符上可以显示元素在页面上的相应位置（类似于在 Elements 面板中悬停在节点上）。
- 点击元素可以将其在 Elements 面板中选中。
- 切换复选框可以启用或停用断点。
触发 DOM 断点时，断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的原因：
查看元素事件侦听器
在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器。
Event Listeners 窗格中的顶级项目将显示具有已注册侦听器的事件类型。
点击事件类型（例如 click）旁的箭头可以查看已注册事件处理程序的列表。 每个处理程序都由一个类似于 CSS 选择器的元素标识符标识，例如 document 或 button#call-to-action。如果已为相同元素注册多个处理程序，将重复列示元素。
点击元素标识符旁的展开箭头可以查看事件处理程序的属性。Event Listeners 窗格将列出每个侦听器的以下属性：
| 事件侦听器属性和说明 | |
|---|---|
handler |
包含一个回调函数。右键点击函数并选择 Show Function Definition 可以查看函数的定义位置（如果源代码可用）。 |
useCapture |
指示 addEventListener 上的 useCapture 标志是否设置的布尔值。 |
注：许多 Chrome 扩展程序都会将其自己的事件侦听器添加到 DOM 上。如果您看到一些不是由您的代码设置的事件侦听器，您可能希望在隐身窗口中重新打开页面。默认情况下，隐身窗口会阻止扩展程序运行。
查看祖先实体事件侦听器
如果启用 Ancestors 复选框，除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器。
如果停用复选框，将仅显示当前选定节点的事件侦听器。
查看框架侦听器
启用 Framework listeners 复选框时，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。
如果停用 Framework listeners 复选框，事件侦听器代码很可能会在框架或内容库代码的其他地方解析。
