chrome 检查和编辑页面与样式

官方文档

概览

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

• 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。
• 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
• 在 Computed 窗格中查看和修改选定元素的框模型。
• 在 Sources 面板中查看在本地对页面所做的更改。

实时编辑 DOM 节点

要实时编辑 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 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情。

查看本地更改

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

1. 在 Styles 窗格中，点击您修改的文件。DevTools 会将您带到 Sources 面板。
2. 右键点击文件。
3. 选择 Local modifications。

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

• 展开顶级文件名查看做出修改的时间 做出修改的时间。
• 展开第二级项目查看修改相应的不同（前和后）。

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

撤消更改

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

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

• 使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。
• 要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert。

---

检查动画

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

• 通过打开动画检查器捕捉动画。检查器会自动检测动画并将它们分类为多个组。
• 通过慢速播放、重播或查看动画源代码来检查动画。
• 通过更改动画时间、延迟、持续时间或关键帧偏移修改动画。

概览

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

• 检查动画。您希望慢速播放、重播或检查动画组的源代码。
• 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。

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

什么是动画组？

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

使用入门

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

• 转到 Styles 窗格（位于 Elements 面板上），然后按 Animations 按钮（Animations 按钮）。
• 打开 Command Menu，键入 Drawer: Show Animations。

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

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

• Controls。从这里，您可以清除所有当前捕捉的动画组，或者更改当前选定动画组的速度。
• Overview。在这里选择动画组，然后在 Details 窗格中进行检查和修改。
• Timeline。 从这里暂停和开始动画，或者跳到动画中的特定点。
• Details。 检查和修改当前选定的动画组。

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

检查动画

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

• 在 Overview 窗格中将鼠标悬停在动画的缩略图上方，查看它的预览。
• 从 Overview 窗格中选择动画组（这样，动画组就会显示在 Details 窗格中），然后按 replay 按钮。动画会在视口中重播。点击 animation speed 按钮更改当前选定动画组的预览速度。您可以使用红色的垂直条更改当前位置。
• 点击并拖动红色的垂直条以拖拽视口动画。

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

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

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

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

修改动画

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

• 动画持续时间。
• 关键帧时间。
• 开始时间延迟。

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

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

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

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

---

编辑 DOM

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

• DOM 定义您的页面结构。每一个 DOM 节点都是一个页面元素，例如，标题节点或段落节点。
• 通过渲染的 DOM 实时编辑页面的内容和结构。
• 不过请记住，您无法在 Elements 面板中通过 DOM 更改修改源文件。重新加载页面会清空任何 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 导航

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

使用鼠标：

• 点击一次可以突出显示节点。
• 要展开节点，请双击节点上的任何地方，或者点击节点旁边的箭头。
• 要折叠节点，请点击节点旁边的箭头。

使用键盘：

• 按向上箭头键可以选择当前节点上方的节点。
• 按向下箭头可以选择当前节点下方的节点。
• 按向右箭头键可以展开折叠的节点。再按一次可以移动到（已展开）节点的第一个子级。 您可以使用此方法快速导航到深度嵌套的节点。

面包屑导航记录导航

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

编辑 DOM 节点和属性

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

• 直接在节点名称或属性上双击。
• 突出显示节点，按 Enter，然后按 Tab， 直到选中名称或属性。
• 打开 more actions 菜单 并选择 Add Attribute 或 Edit Attribute。 Edit Attribute 取决于上下文；您点击的部分决定要编辑的内容。

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

以 HTML 形式编辑 DOM 节点及其子级

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

• 打开 more actions 菜单并选择 Edit as HTML。
• 按 F2 (Windows / Linux) 或 Fn+F2 (Mac)。
• 按 Ctrl+Enter (Windows / Linux) 或 Cmd+Enter (Mac) 保存更改。
• 按 Esc 可以退出编辑器而不保存。

移动 DOM 节点

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

删除 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 复选框，除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器。

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

查看框架侦听器

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

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

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