官方文档

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。

要实时编辑 DOM 节点，只需双击选定元素，然后进行更改： DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。 例如，您可以使用 JavaScript 修改 DOM 树；浏览器引擎会尝试修正无效的作者标记并生成意外的 DOM。

在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。 要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。

默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失。 如果您想要在页面加载时保留更改，请设置永久制作。

使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。

同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。 对于位置为非静态的元素，还会显示 position 矩形，包含 top、right、bottom 和 left 属性的值。

对于 position: fixed 和 position: absolute 元素，中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通过双击修改，就像 Styles 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情。

要查看对页面所做实时编辑的历史记录，请执行以下操作：

要探索所做的更改，请执行以下操作：

粉色背景的线表示移除，绿色背景的线表示添加。

如果您未设置永久制作，每次您重新加载页面时，所有的实时编辑都会丢失。

假设您已设置了永久制作，要撤消更改，请执行以下操作：

使用 Chrome DevTools 动画检查器检查和修改动画。

Chrome DevTools 动画检查器有两个主要用途。

动画检查器支持 CSS 动画、CSS 过渡和网络动画。当前不支持 requestAnimationFrame 动画。

动画组是一组看上去彼此相关的动画。 当前，网页没有真正概念的组动画，动画设计师和开发者必须编排和设置各个动画的时间，让它们看上去有一种连贯的视觉效果。动画检查器会根据开始时间（不包括延迟等等）预测哪些动画相关并将它们并排分组。也就是说，全部在同一脚本块中触发的一组动画被分为一组，但如果是异步的，它们将单独分组。

可以通过两种方式打开动画检查器：

动画检查器将在 Console 抽屉旁作为标签打开。由于检查器是一个是抽屉式导航栏标签，您可以从任何 DevTools 面板打开它。

动画检查器分为四个主要部分（或窗格）。本指南使用以下名称指代各个窗格：

要捕捉动画，只需在动画检查器打开时执行可以触发动画的交互。 如果动画在页面加载时触发，您可以重新加载页面，帮助动画检查器检测动画。

捕捉动画后，可以通过以下几种方式重播动画：

查看动画详细信息 捕捉动画组后，在 Overview 窗格点击动画组可以查看其详细信息。 在 Details 窗格中，每个动画会单独成行。

将鼠标悬停在动画上可以在视口中突出显示该动画。点击动画，在 Elements 面板中将其选中。

动画最左侧的深色部分是其定义。右侧的浅色部分表示重复。 例如，在下方的屏幕截图中，第二和第三部分表示第一部分的重复。

如果两个元素应用了同一个动画，动画检查器会给它们分配相同的颜色。 颜色本身是随机的且没有意义。例如，在下方的屏幕截图中，两个元素 div.eye.left::after 和 div.eye.right::after 已应用了同一个动画 (eyes)，div.feet::before 和 div.feet::after 元素也同样如此。

可以通过以下三种方式使用动画检查器修改动画：

对于本部分，假设下面的屏幕截图代表原始动画：

要更改动画的持续时间，请点击并拖动第一个或最后一个圆圈。

如果动画定义了任何关键帧规则，那么这些将表示为白色内圈。 点击并拖动其中一个以更改关键帧的时间。

要为动画添加延迟，请点击并将其拖动至圆圈以外的任何位置。

Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构。

使用 Elements 面板可以在一个 DOM 树中检查页面中的所有元素。 选择任何元素并检查应用到该元素的样式。

可以通过多种方式检查元素： 右键点击页面上的任何元素并选择 Inspect。

按 Ctrl + Shift + C (Windows) 或 Cmd + Shift + C (Mac)，在 Inspect Element 模式下打开 DevTools，然后将鼠标悬停到某个元素上。 DevTools 会在 Elements 面板中自动突出显示您悬停的元素。点击元素可以退出检查模式，同时保持元素在 Elements 面板中处于突出显示状态。

点击 Inspect Element 按钮 转到 Inspect Element 模式，然后点击元素。 在控制台中使用 inspect 方法，例如 inspect(document.body)。

使用您的鼠标或键盘在 DOM 结构中导航。 折叠的节点的旁边会有一个向右箭头 展开的节点的旁边会有一个向下箭头

使用鼠标：

使用键盘：

Elements 面板的底部是面包屑导航记录。 当前选定的节点将以蓝色突出显示。左侧是当前节点的父级。 再左侧是父级的父级。以此类推，一直到 DOM 树。 在结构中向上导航会移动突出显示焦点： DevTools 会在记录中显示尽可能多的项目。如果状态栏无法显示全部记录，将在记录截断的地方显示一个省略号 (…)。点击省略号可以显示隐藏的元素：

要编辑 DOM 节点名称或属性，请执行以下操作：

完成后，结束标记将自动更新。

要以 HTML 形式编辑 DOM 节点及其子级，请执行以下操作：

点击、按住并拖动节点可将其移动。

要删除 DOM 节点，请执行以下操作：

注：如果您意外删除了节点，按 Ctrl + Z（Mac 上为 Cmd + Z）可以撤消您的上一步操作。

利用 more actions 菜单，您可以通过多种方式与 DOM 节点交互。 要查看该菜单，请右键点击节点，或者选择节点，然后按 more actions 按钮。按钮仅在当前选定的元素上显示。

悬停或选择 DOM 节点时，渲染的节点将在视口中突出显示。 如果节点滚动到屏幕以外，在节点位于当前视口上方时您将在视口顶部看到提示，而在节点位于当前视口下方时，您将在底部看到提示。例如，在下方的屏幕截图中，DevTools 指出 Elements 面板中当前选定的节点位于视口以下。

要滚动页面使节点在视口中显示，请右键点击节点并选择 Scroll into View。

设置 DOM 断点以调试复杂的 JavaScript 应用。例如，如果您的 JavaScript 正在更改 DOM 元素的样式，请将 DOM 断点设置为在元素属性修改时触发。在发生以下一种 DOM 更改时触发断点：子树更改、属性更改、节点移除。

添加、移除或移动子元素时将触发子树修改断点。例如，如果您在 main-content 元素上设置子树修改，以下代码将触发断点：

动态更改元素的属性 (class, id, name) 时将发生属性修改：

从 DOM 中移除有问题的节点时将触发节点移除修改：

Elements 和 Sources 面板均包含一个用于管理 DOM 断点的窗格。

每个断点都会列出元素标识符和断点类型。

可通过以下方式之一与列出的每一个断点交互：

触发 DOM 断点时，断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的原因：

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器。

Event Listeners 窗格中的顶级项目将显示具有已注册侦听器的事件类型。

点击事件类型（例如 click）旁的箭头可以查看已注册事件处理程序的列表。 每个处理程序都由一个类似于 CSS 选择器的元素标识符标识，例如 document 或 button#call-to-action。如果已为相同元素注册多个处理程序，将重复列示元素。 点击元素标识符旁的展开箭头可以查看事件处理程序的属性。Event Listeners 窗格将列出每个侦听器的以下属性：

注：许多 Chrome 扩展程序都会将其自己的事件侦听器添加到 DOM 上。如果您看到一些不是由您的代码设置的事件侦听器，您可能希望在隐身窗口中重新打开页面。默认情况下，隐身窗口会阻止扩展程序运行。

如果启用 Ancestors 复选框，除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器。

如果停用复选框，将仅显示当前选定节点的事件侦听器。

某些 JavaScript 框架和库会将原生 DOM 事件封装到它们的自定义事件 API 中。 过去，这会让使用 DevTools 检查事件侦听器非常困难，因为函数定义仅会引用框架或内容库代码。框架侦听器功能让这一问题迎刃而解。

启用 Framework listeners 复选框时，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。

如果停用 Framework listeners 复选框，事件侦听器代码很可能会在框架或内容库代码的其他地方解析。