Chrome DevTools

概述

Chrome DevTools 是一组直接内置于 Google Chrome 浏览器中的 Web 开发工具。 DevTools 可以帮助您即时编辑页面并快速诊断问题，最终帮助您更快地构建更好的网站。

打开开发工具

打开 DevTools 的方法有很多种，便于不同的用户快速访问不同的部分。

方法1

    当您想要使用【DOM】或【CSS】时，右键单击页面上的元素并选择【检查】。

以跳转到【Elements】面板。 或者按 Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、Chrome 操作系统）。

方法2

    如果您想查看记录的消息或运行 JavaScript，请按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、Chrome OS）直接跳到【Console】面板。

方法3

    打开您上次打开的最后一个面板，按 Command+Option+I (Mac) 或 Control+Shift+I。

方法4

    从 Chrome 的主菜单打开 DevTools，参考下图。

方法5

    在每个新选项卡上自动打开 DevTools，从【命令行】打开 Chrome 并传递 --auto-open-devtools-for-tabs 标志。

    例如：

C:\Program Files\Google\Chrome\Application>chrome.exe  --auto-open-devtools-for-tabs

    这仅在 Chrome 实例尚未运行时才有效。 从那时起，每个新选项卡都会自动打开 DevTools，直到用户完全退出 Chrome。

新功能 

以下链接可以获得 DevTools 中新增功能的列表。

https://developer.chrome.com/docs/devtools/updates/

CSS 

查看和改变CSS

完成这些交互式教程，了解使用 Chrome DevTools 查看和更改页面 CSS 的基础知识。

查看元素的CSS

在浏览器页面右键单击任何元素，并选择检查。 DevTools 的【Elements】面板打开。被选择的元素在DOM 树中突出显示。被选择元素的CSS样式在【Styles】选项卡中显示。

向元素添加 CSS 声明

当您想要更改或添加 CSS 声明到元素时，请使用【Styles】选项卡。

步骤1，点击【element.style】的空白处。

步骤2，输入【background-color】并按下【Enter】键。

步骤3，输入属性值。

步骤4，该属性将添加到元素的内联样式中。

向元素添加 CSS 类

使用【Styles】选项卡查看当 CSS 类应用于元素或从元素中删除时元素的外观。

步骤1，点击【.cls】。

步骤2，输入类名。

步骤3，按下【Enter】键。

步骤4，该类将追加到此元素上。

步骤5，可以通过【对号】来调节是否使用。

向类添加伪状态

使用【Styles】选项卡将 CSS 伪状态永久应用于元素。DevTools 支持 :active、:focus、:hover 和 :visited等。

步骤1，点击【.hov】。

步骤2，点击【:hover】。

步骤3，该元素将处于【hover】状态。

更改元素的尺寸

使用【Styles】选项卡中的盒模型交互图来更改元素的宽度、高度、填充、边距或边框长度。

步骤1，划到【Styles】选项卡的最底部。

步骤2，双击要改变属性的值。

步骤3，输入新值。

步骤4，按下【Enter】键。

CSS 特性参考

选择一个元素

DevTools 的【Elements】面板允许您一次查看或更改一个元素的CSS。所选元素在 DOM 树中以蓝色突出显示。元素的样式显示在【Styles】选项卡中。 

有多种选择元素的方法：

方法1，在 DevTools 中，单击 【Select an element】 选择一个元素或按 Command+Shift+C (Mac) 或 Control+Shift+C（Windows、Linux），然后在视口中单击该元素。

方法2，在 DevTools 中，单击【DOM】区域中的元素。

方法3，在 DevTools 中，在控制台【Console】中运行类似

document.querySelector('p');

的查询，右键单击结果，然后选择在元素面板中显示【RevIn Elements panel】。

查看CSS

1，查看定义规则的外部样式表。

    在【Styles】选项卡中，单击 CSS 规则旁边的链接以打开定义该规则的外部样式表。

2，仅查看实际应用于该元素的 CSS。

    【Styles】选项卡向您显示适用于元素的所有规则，包括已被覆盖的声明。 如果您对覆盖的声明不感兴趣，请使用 【Computed】 选项卡仅查看实际应用于元素的 CSS。按字母顺序显示 CSS 属性。

3，查看继承的 CSS 属性。

    继承的属性是不透明的。 选中【Show All】复选框以查看所有继承的值。

4，分组参看 CSS 元素。

5，搜索和过滤元素的 CSS。

改变CSS

1，向元素添加 CSS 声明。

A，添加内联声明

选择一个元素。

在样式窗格中，单击 【element.style】 部分的括号之间。 光标聚焦，允许您输入文本。

输入属性名称并按 【Enter】。为该属性输入一个有效值，然后按 【Enter】。

在 DOM 树中，您可以看到元素已添加到【Style】属性。

B，向既有样式规则添加声明。

选择一个元素。

在【Styles】选项卡中，单击要向其添加声明的样式规则的括号之间。 光标聚焦，允许您输入文本。

输入属性名称并按【Enter】。为该属性输入一个有效值，然后按【Enter】。

2，更改声明名称或值。

单击声明的名称或值以更改它。

3，使用键盘快捷键更改声明值。

在编辑声明的值时，您可以使用以下键盘快捷键将值增加固定数量。

Option+Up (Mac) 或 Alt+Up（Windows、Linux）增加 0.1。
Up 将值更改 1，如果当前值介于 -1 和 1 之间，则更改 0.1。
Shift+Up 增加 10。
Shift+Command+Up (Mac) 或 Shift+Ctrl+Page Up（Windows、Linux）将值增加 100。

递减也有效。 只需用 【Down】 替换上面提到的每个 【Up】 实例。

4，给元素添加一个类。

选择 DOM 树中的元素。

单击 【.cls】。

在添加新类文本框中输入类的名称。

按 【Enter】。

5，切换类。

切换要启用或禁用的类旁边的复选框。

6，添加样式规则。

单击【New Style Rule】。 DevTools 在【element.style】规则下插入一条新规则。

选择要向其中添加规则的样式表。
添加新样式规则时，单击并按住 【New Style Rule】以选择要将样式规则添加到哪个样式表。

7，切换声明。

打开或关闭单个声明：

选择一个元素。
在【Styles】窗格中，将鼠标悬停在定义声明的规则上。 复选框出现在每个声明旁边。

选中或取消选中声明旁边的复选框。当您取消选中某个声明时，DevTools 会将其划掉以表明它不再处于活动状态。

8，使用拾色器更改颜色。

颜色选择器提供了一个用于更改颜色和背景颜色声明的 GUI。

在【Style】选项卡中，找到要更改的颜色或背景颜色声明。 在颜色或背景颜色值的左侧，有一个小方块，它是颜色的预览。

单击预览以打开拾色器。

以下是颜色选择器的每个 UI 元素的描述：

1，【Shades】调色板，点击可切换颜色。
2，吸管。可以吸取当前页面别处的颜色。将鼠标悬停在视口中的目标颜色上。点击确认。

3，复制到剪贴板。 将显示值复制到剪贴板。
4，显示值。 颜色的 RGBA、HSLA 或十六进制表示。
5，调色板。 单击这些方块之一将颜色更改为该方块。
6，色调。用来调节色调。
7，透明度。用来调节透明度。
8，显示值切换器。 在当前颜色的 RGBA、HSLA 和十六进制表示之间切换。
9，调色板切换器。 在 Material Design 调色板、自定义调色板或页面颜色调色板之间切换。 DevTools 根据它在样式表中找到的颜色生成页面调色板。

9，使用角度时钟更改角度值。

角度时钟提供了一个用于更改 CSS 属性值中的 <angle> 的 GUI。

选择带有角度声明的元素。

单击角度值旁边的角度预览框。单击预览以打开角度时钟。

通过单击“角度时钟”圆圈或滚动鼠标以将角度值增加/减少 1 来更改角度值。

您可以使用以下键盘快捷键将值增加固定数量。
Up 将值更改 1。
Shift+Up 增加 10。

检查动画

使用【Chrome DevTools Animation Inspector】检查和修改动画。

概括

1，通过打开动画检查器来捕捉动画。 它会自动检测动画并将它们分类。
2，通过减慢动画速度、重放动画或查看其源代码来检查动画。
3，通过更改时间、延迟、持续时间或关键帧偏移来修改动画。

概述

Chrome DevTools Animation Inspector 有两个主要用途。

1，检查动画。 您想要放慢、重放或检查动画组的源代码。
2，修改动画。 您想要修改动画组的时间、延迟、持续时间或关键帧偏移。 目前不支持 Bezier 编辑和关键帧编辑。

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

什么是动画组

动画组是一组看起来彼此相关的动画。 目前，网络上没有真正的组动画概念，因此动画设计师和开发人员必须对单个动画进行合成和计时，使它们看起来是一个连贯的视觉效果。 动画检查器根据开始时间（不包括延迟等）预测哪些动画是相关的，并将它们并排分组。 换句话说，在同一个脚本块中触发的一组动画被组合在一起，但如果它们是异步的，那么它们将被单独组合。

开始

有两种方法可以打开动画检查器：

A，通过主菜单：

单击“更多”以打开主菜单。导航到更多工具子菜单。选择动画。

B，打开命令菜单并键入【Show Animations】。

动画检查器作为控制台抽屉旁边的选项卡打开。 由于它是一个 Drawer 选项卡，您可以从任何 DevTools 面板中使用它。

动画检查器分为四个主要部分（或窗格）。 本指南对每个窗格的引用如下：

1，控制。 从这里您可以清除当前捕获的所有动画组，或更改当前选定动画组的速度。
2，概述。 在此处选择一个动画组以在“详细信息”窗格中检查和修改它。
3，时间线。 从这里暂停和开始动画，或跳转到动画中的特定点。
4，细节。 检查并修改当前选定的动画组。

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

检查动画

捕获动画后，有几种方法可以重放它：

将鼠标悬停在“概览”窗格中的缩略图上以查看其预览。

从概览窗格中选择动画组（以便它显示在详细信息窗格中），然后按重播按钮（重播按钮）。 动画在视口中重播。

单击动画速度按钮动画速度按钮可更改当前选定动画组的预览速度。 您可以使用红色竖条更改当前位置。单击并拖动红色垂直条以擦洗视口动画。

 查看动画详情。

 捕获动画组后，从“概览”窗格中单击它以查看其详细信息。 在详细信息窗格中，每个单独的动画都有自己的行。

将鼠标悬停在动画上以在视口中突出显示它。 单击动画以在“元素”面板中选择它。

 

动画最左边、较暗的部分是它的定义。 右边，更褪色的部分代表迭代。 例如，在下面的屏幕截图中，第二节和第三节代表第一节的迭代。 

如果两个元素应用了相同的动画，动画检查器会为它们分配相同的颜色。 颜色本身是随机的，没有意义。 例如，在下面的屏幕截图中，【div.eye.left::after】 和 【div.eye.right::after】 两个元素应用了相同的动画（眼睛）。 

 修改动画

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

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

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

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

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

检查 CSS 网格

本指南向您展示如何在页面上发现 CSS 网格、检查它们并在 Chrome DevTools 的 【Elements】 面板中调试布局问题。

本文中出现的截图中显示的示例来自这两个网页：Fruit box 和 Snack box。

发现 CSS 网格

当页面上的 HTML 元素应用了【display: grid】或【display: inline-grid】时，您可以在【Elements】面板中看到它旁边的网格标记。

 

单击标记可切换出页面上网格覆盖的显示。 叠加层出现在元素上，像网格一样布局以显示其网格线和轨道的位置：

打开布局窗格。 当页面上包含网格时，【Layout】选项卡将包含一个【Grid】部分，其中包含许多用于查看这些网格的选项。 

 
网格查看选项

布局窗格中的网格部分包含 2 个子部分：叠加显示设置，网格叠加，让我们详细研究每个子部分。

叠加显示设置

叠加显示设置由两部分组成：

A，包含以下选项的下拉菜单：

隐藏线标签：隐藏每个网格叠加的线标签。
显示行号：显示每个网格覆盖的行号（默认选中）。
显示线名称：对于带有线名称的网格，显示每个网格叠加的线名称。

B，带有以下选项的复选框：

显示轨道大小：切换以显示或隐藏轨道大小。
显示区域名称：在具有命名网格区域的网格的情况下，切换以显示或隐藏区域名称。
延长网格线：默认情况下，网格线只显示在带有【display: grid】或【display: inline-grid】的元素内部； 当打开此选项时，网格线沿每个轴延伸到视口的边缘。
让我们更详细地检查这些设置。

显示行号

默认情况下，正负行号显示在网格叠加上。

隐藏线标签

选择隐藏行标签以隐藏行号。

显示线路名称

您可以选择【Show line names】来查看线路名称而不是数字。 在这个例子中，我们有 4 行名称：left、middle1、middle2 和 right。

在这个演示中，【orange】元素从左到右跨越，CSS 【grid-column: left / right】。 显示行名称可以更容易地可视化元素的开始和结束位置。

显示轨道尺寸

启用显示轨道大小【Show track sizes】复选框以查看网格的轨道大小。

DevTools 会在每行标签中显示【authored size】 - 【computed size】：【Authored size】：样式表中定义的大小（未定义时省略）。【computed size】：屏幕上的实际尺寸。

在这个演示中，【Snack box】的大小在 CSS 【grid-template-columns:1fr 2fr;】 中定义。 因此，列线标签显示创作和计算的大小：1fr - 96.66px 和 2fr - 193.32px。

行线标签仅显示计算出的大小：80px 和 80px，因为样式表中没有定义行大小。

显示区域名称

要查看区域名称，请启用显示区域名称【Show area names】复选框。 在此示例中，网格中有 3 个区域 - 顶部【top】、底部 1【bottom1】 和底部 2【bottom2】 。

延长网格线

启用扩展网格线【Extend grid lines】复选框以将网格线沿每个轴延伸到视口的边缘。

网格叠加

网格覆盖部分包含页面上的网格列表，每个网格都有一个复选框以及各种选项。

启用多个网格的叠加视图

您可以启用多个网格的叠加视图。 在这个例子中，启用了 2 个网格覆盖 -【main】和【div.snack-box】，每个都用不同的颜色表示。

自定义网格叠加颜色

您可以通过单击颜色选择器来自定义每个网格覆盖颜色。

突出显示网格

单击突出显示图标以立即突出显示 HTML 元素，在页面中滚动到该元素并在【Elements】面板中选择它。 

强制打印预览模式 

打印媒体查询【print media query】控制页面打印时的外观。强制页面进入打印预览模式：

1，按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome OS）打开命令菜单。

2，键入渲染【rendering】，选择显示渲染【Show Rendering】，然后按【Enter】。 

3，在模拟 CSS 媒体【Emulate CSS media】下选择打印【print】。

开始查看和更改 DOM

    完成这些交互式教程，了解使用 Chrome DevTools 查看和更改页面 DOM 的基础知识。

查看 DOM 节点

    【Elements】面板的 DOM 树是您在 DevTools 中执行所有 DOM 相关活动的地方。

检查节点。

    使用键盘导航 DOM 树。

        1，按上，下箭头键。进行上下移动选择。

        2，按左，右箭头键。进行左右折叠，展开选择。

滚动查看。

    通过DOM 树快速定位其对应的HTML元素。

    在【Elements】面板，鼠标右键【Scroll into view】。

搜索节点。

    1，将光标聚焦在【Elements】面板上。

    2，按 Control+F 或 Command+F (Mac)。 搜索栏在 DOM 树的底部打开。

    3，输入查找的内容，在 DOM 树中突出显示。 

    如上所述，搜索栏还支持 CSS 和 XPath 选择器。

编辑 DOM

    您可以即时编辑 DOM 并查看这些更改如何影响页面。

编辑内容。

    1，双击要改变的内容，文本以蓝色突出显示，表示它已被选中。

     2，输入新的值，并按下【Enter】键。

编辑属性。

    1，双击要改变的属性，文本以蓝色突出显示，表示它已被选中。

     2，按向右箭头键，添加一个空格，键入【style="background-color:gold"】，然后按【Enter】键。 节点的背景颜色变为金色。

编辑节点类型。

    双击要改变的节点元素，使其进入被选择状态。删除原本的元素名称，输入新的元素名称。按下【Enter】键。

重新排序 DOM 节点。

    选择排序的对象，鼠标左键按下进行拖动，拖到目标位置，松开左键即可。

强制状态。

     鼠标右键目标元素，选择【Force State】，再选择相应的强制状态。

隐藏节点。

     在目标元素被选择的状态下，按下【H】键，隐藏节点。再次按下【H】键，显示节点。

删除节点。 

    在目标元素被选择的状态下，按下【Delete】键，删除节点。按 Control+Z 或 Command+Z (Mac)。最后一个动作被撤销，节点重新出现。

控制台中的访问节点

DevTools 提供了一些从控制台访问 DOM 节点或获取对它们的 JavaScript 引用的快捷方式。

用 $0 引用当前选中的节点。

检查节点时，节点旁边的 == $0 文本表示您可以在控制台中使用变量 $0 引用此节点。

    选择目标元素，按下【Escape】打开【Console】抽屉。键入【$0】，按下【Enter】键。将鼠标悬停在结果上。 该节点在视口中突出显示。

存储为全局变量。

如果您需要多次引用某个节点，请将其存储为全局变量。 

    选择目标元素，右键选择【Store as global variable】。控制台将生成一个名为【temp1】的全局变量。

复制JS路径。

当您需要在自动化测试中引用它时，将 JavaScript 路径复制到节点。

    选择目标元素，右键选择【Copy > Copy JS Path】，解析为节点的 document.querySelector() 表达式已复制到剪贴板。粘贴到控制台，按下【Enter】 键。

其他1，使用 Coverage 选项卡查看已使用和未使用的 CSS。

在 DevTools 处于焦点时按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome OS）以打开命令菜单。

开始输入【coverage】 并选择 【Show Coverage】。 覆盖选项卡出现。

单击开始检测覆盖率并重新加载页面 开始检测覆盖率并重新加载页面。 页面重新加载，Coverage 选项卡概述了浏览器加载的每个文件使用了多少 CSS（和 JavaScript）。 绿色代表使用过的 CSS。 红色代表未使用的 CSS。

单击 CSS 文件以查看其使用的 CSS 的逐行细分。