chrome开发工具指南（六）

检查和编辑页面与样式

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

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

实时编辑 DOM 节点

要实时编辑 DOM 节点，只需双击选定元素，然后进行更改：

实时编辑样式

在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。

要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。

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

检查和编辑框模型参数

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

同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。

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

查看本地更改

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

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

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

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

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

撤消更改

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

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

• 使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。

• 要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert

检查应用到元素的样式

1. 与元素匹配的选择器的关联样式。
2. User Agent 样式表清晰标记，并且在网页上经常被 CSS 替换。
3. 已被级联规则替换的规则将显示为带删除线的文本。
4. 继承的样式将在“Inherited from <NODE>”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 （CSS 2.1 属性表显示了哪些属性是可以继承的。）
5. 灰色的条目不是已定义的规则，而是在运行时计算的规则。

检查受选择器影响的元素

在 Styles 窗格中将鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。 例如，在下面的屏幕截图中，鼠标悬停在选择器 .wf-tools-guide__section-link a 上。在实时页面中，您可以看到受选择器影响的所有 <a> 元素。

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作：

• 启用或停用当前与元素关联的类。
• 向元素添加新类。

编辑现有属性名称或值

点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时，按 Tab 可以向前移动到下一个属性、名称或选择器。

按 Shift+Tab 可以向后移动。

编辑数字式 CSS 属性值时，可以使用下面的键盘快捷键增大和减小值：

• 使用向上键和向下键能够以 1 为增量增大和减小值（如果当前值介于 -1 和 1 之间，则增量为 0.1）。
• 使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。
• 使用 Shift+向上键能够以 10 为增量增大值；使用 Shift+向下键能够以 10 为增量减小值。
• 使用 Shift+Page Up（Windows、Linux）或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down（Windows、Linux）或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

添加新属性声明

点击可编辑 CSS 规则中的空白处可以创建一个新声明。 键入，或者将 CSS 粘贴到 Styles 窗格中。属性及其值将解析并输入到正确的字段中。

注：要启用或停用样式声明，请选中或取消选中旁边的复选框。

添加样式规则

点击 New Style Rule () 按钮可以添加一个新的 CSS 规则。

点击并按住按钮可以选择要向哪一个样式表添加规则。

添加或移除动态样式（伪类）

您可以在元素上手动设置动态伪类选择器（例如 :active、:focus、:hover 和 :visited）。

可以通过两种方式在元素上设置动态状态：

• 在 Elements 面板内右键点击某个元素，然后从菜单中选择目标伪类，将其启用或停用。 

• 在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器。

编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式。

TL;DR

• 利用 Styles 窗格，您可以在本地以尽可能多的方法更改 CSS，包括修改现有样式、添加新样式，以及为样式添加规则。
• 如果您希望样式可以保持（不会在重新加载后消失），则需要将其保存到您的开发工作区中。

检查应用到元素的样式

选择一个元素以检查其样式。 Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低：

• 顶端为 element.style。这些样式要么直接使用样式属性（例如 <p style="color:green">）直接应用到元素，要么在 DevTools 中应用。

• 下方是与元素匹配的任何 CSS 规则。例如，在下面的屏幕截图中，选定元素从 tools.css 中定义的规则接收 line-height:24px。

• 再下方是继承的样式，其中包括与选定元素的祖先实体匹配的任何可继承样式规则。 例如，在下面的屏幕截图中，选定元素从 user agent stylesheet 继承 display:list-item。

下图上的标签与其下方带编号的项目对应。

1. 与元素匹配的选择器的关联样式。
2. User Agent 样式表清晰标记，并且在网页上经常被 CSS 替换。
3. 已被级联规则替换的规则将显示为带删除线的文本。
4. 继承的样式将在“Inherited from <NODE>”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 （CSS 2.1 属性表显示了哪些属性是可以继承的。）
5. 灰色的条目不是已定义的规则，而是在运行时计算的规则。

了解级联和继承的原理对于调试样式至关重要。 级联与 CSS 声明被赋予的权重有关，权重用于确定规则在与其他规则重叠时哪些规则的优先级更高。 继承与 HTML 元素如何从其所属元素（祖先实体）继承 CSS 属性有关。 如需了解详情，请参阅有关级联的 W3C 文档。

检查受选择器影响的元素

在 Styles 窗格中将鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。 例如，在下面的屏幕截图中，鼠标悬停在选择器 .wf-tools-guide__section-link a 上。在实时页面中，您可以看到受选择器影响的所有 <a> 元素。

注：此功能仅突出显示视口中的元素；视口以外的其他元素也可能受选择器影响。

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作：

• 启用或停用当前与元素关联的类。
• 向元素添加新类。

编辑现有属性名称或值

点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时，按 Tab 可以向前移动到下一个属性、名称或选择器。

按 Shift+Tab 可以向后移动。

编辑数字式 CSS 属性值时，可以使用下面的键盘快捷键增大和减小值：

• 使用向上键和向下键能够以 1 为增量增大和减小值（如果当前值介于 -1 和 1 之间，则增量为 0.1）。
• 使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。
• 使用 Shift+向上键能够以 10 为增量增大值；使用 Shift+向下键能够以 10 为增量减小值。
• 使用 Shift+Page Up（Windows、Linux）或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down（Windows、Linux）或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

添加新属性声明

点击可编辑 CSS 规则中的空白处可以创建一个新声明。 键入，或者将 CSS 粘贴到 Styles 窗格中。属性及其值将解析并输入到正确的字段中。

注：要启用或停用样式声明，请选中或取消选中旁边的复选框。

添加样式规则

点击 New Style Rule () 按钮可以添加一个新的 CSS 规则。

点击并按住按钮可以选择要向哪一个样式表添加规则。

添加或移除动态样式（伪类）

您可以在元素上手动设置动态伪类选择器（例如 :active、:focus、:hover 和 :visited）。

可以通过两种方式在元素上设置动态状态：

• 在 Elements 面板内右键点击某个元素，然后从菜单中选择目标伪类，将其启用或停用。 

• 在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器。

向样式规则添加背景色或颜色

Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。

样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标。

将鼠标悬停到此图标上可以调出用于添加 color 声明 () 或 background-color 声明 () 的按钮。点击这些按钮之一可以将声明添加到样式规则中。

使用 Color Picker 修改颜色

要打开 Color Picker，请在 Styles 窗格中查找一个定义颜色的 CSS 声明（例如 color: blue）。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker。

您可以通过多种方式与 Color Picker 交互：

1. 取色器。请参阅取色器了解更多信息。
2. 当前颜色。当前值的可视表示。
3. 当前值。当前颜色的十六进制、RGBA 或 HSL 表示。
4. 调色板。请参阅调色板了解更多信息。
5. 着色和阴影选择器。
6. 色调选择器。
7. 不透明度选择器。
8. 颜色值选择器。点击可以在 RGBA、HSL 和十六进制之间切换。
9. 调色板选择器。点击可以选择不同的模板。

取色器

点击取色器按钮将其启用 ()，在实时页面上将鼠标悬停到某种颜色上，然后点击，将当前选定的声明值设置为您悬停的颜色。

调色板

Color Picker 提供了下列调色板：

• Page Colors。一组从页面的 CSS 自动生成的颜色。
• Material Design。一组符合 Material Design 规范的颜色。
• Custom。您选择的任意一组颜色。DevTools 可以保存您的自定义调色板（甚至在不同的页面间），直至您将其删除。

修改自定义调色板（custom下）

按加号按钮可以将当前颜色添加到调色板中。 点击并按住颜色可以将其拖动到不同的位置，或者将其拖动到垃圾桶图标进行删除。 右键点击颜色并选择 Remove color 可以将其删除。 选择 Remove all to the right 可以删除当前选定颜色右侧的所有颜色。 右键点击调色板区域中的任何位置，然后选择 Clear template 可以删除模板的所有颜色。

查看和编辑 CSS 自定义属性（CSS 变量）

您可以查看和编辑定义或使用 CSS 自定义属性（之前称为 CSS 变量）的声明，就像查看和编辑任何其他声明一样。

自定义属性通常在 :root 选择器中定义。 要查看在 :root 中定义的自定义属性，请检查 html 元素。

不过，并不一定要在 :root 选择器上定义自定义属性。如果您在其他地方定义，请在定义元素的地方检查元素以查看定义。

您可以查看和编辑使用自定义属性的声明值，就像查看和编辑任何其他声明值一样。

如果您看到一个像 var(--main-color) 一样的声明值（如下面的屏幕截图所示），则表示声明正在使用自定义属性。 可以像编辑任何其他声明值一样编辑这些值。 目前，没有办法跳转到自定义属性定义。

编辑 Sass、Less 或 Stylus

如果您在使用 Sass、Less、Stylus 或任何其他 CSS 预处理器，则在 Styles 编辑器中编辑生成的 CSS 输出文件不会有任何作用，因为它们不会映射到您的源代码。

借助 CSS 源映射，DevTools 可以将生成的文件自动映射到源代码文件，这样，您可以在 Sources 面板中实时编辑这些文件并查看结果，而不用离开 DevTools 或刷新页面。

预处理器工作流

在检查样式由生成的 CSS 文件提供的元素时，Elements 面板会显示原始的源文件而不是生成的 CSS 文件的链接。

要跳转到源文件，请执行以下操作：

1. 点击链接，在 Sources 面板中打开（可编辑）源文件。
2. Ctrl + 点击（或 Cmd + 点击）任何 CSS 属性名称或值，打开源文件并跳转到相应行。

在 DevTools 中保存对 CSS 预处理器文件的更改时，CSS 预处理器应重新生成 CSS 文件。然后，DevTools 将重新加载新生成的 CSS 文件。

启用/停用 CSS 源映射和自动重新加载

默认情况下，CSS 源映射处于启用状态。您可以选择启用生成的 CSS 文件的自动重新加载。要启用 CSS 源映射和 CSS 重新重新加载，请执行以下操作：

1. 打开 DevTools 的 Settings 面板并点击 General。
2. 开启 Enable CSS source maps 和 Auto-reload generated CSS。

要求和问题

• DevTools 无法检测到在外部编辑器中进行的更改，直至包含关联的源文件的 Sources 标签重新获得焦点。
• 手动修改 Sass/LESS/其他编译器生成的 CSS 文件将中断源映射关联，直至页面重新加载。
• 使用工作区？确保生成的 CSS 文件同时映射到工作区中。为此，您可以查看 Sources 面板右侧树，确定 CSS 是从您的本地文件夹提供。
• 要使 DevTools 在您更改源文件时自动重新加载样式，必须将您的预处理器设置为在源文件每次发生更改时都重新生成 CSS 文件。否则，您必须手动重新生成 CSS 文件并重新加载页面才能看到更改。
• 您必须从网络服务器访问您的网站或应用（不是从 file:// 网址），服务器必须提供 CSS 文件，以及源映射 (.css.map) 和源文件 (.scss, etc.)。
• 如果您_未_使用“工作区”功能，网络服务器还必须提供 Last-Modified 标头。

在设置 CSS 与 JS 预处理器中了解如何设置源映射。