谷歌开发者---手册1、Elements 1-1、查看与修改HTML元素当Elemets面板，在Inspect模式下：

1、Elements

1-1、查看与修改HTML元素

当Elemets面板，在Inspect模式下：

双击HTML元素，可以编辑、修改、删除元素的类型、属性（attribute）、内容；
可以拖拽元素，进行排序；
选中元素，按h键可隐藏/显示元素； （visibility: hidden）；
选中元素，按Delete键可删除元素；然后按Ctrl+Z可撤销该操作；
在console面板下，可直接 $0**引用元素，如下图， **$ 0表示对元素的引用；

可选中元素，右击选择Store as global variable，保存一个变量tempN引用元素；
可选中元素，右击选择Copy >Copy JS Path，获得document.querySelector(selector) 表达式；

1-2、查看DOM对象属性(property)

除了查看上述HTML元素，Elements面板还支持查看DOM对象的属性（property）；选中一个HTML元素，切换到properties标签，即可查看HTML元素对用的DOM对象的属性，其中：

DOM对象的直接属性为粗体，继承属性为正常字体；
可枚举属性为高亮色；不可枚举属性为暗色；
默认情况下，属性值为null或undefiend的属性不会显示，选中show all可查看所有属性

1-3、查看与修改CSS

选中一个HTML元素，切换到Styles面板，可查看和更改选中元素的CSS样式规则，其中：

在中单击{}内的空白处，可以添加CSS内联样式规则；
点击，可切换显示/隐藏元素状态列表；点击状态列表中的复选框，可切换是否应用相应状态的伪类到元素；如下图：

点击，可切换显示/隐藏新增类名区域，输入自定义类名custom-class并回车，则custom-class会出现在区域中，点击复选框，可切换是否应用custom-class到元素：

点击，可切换计算样式（即CSS规范中**actual value**）面板，包括元素的盒模型，其他样式；其中，双击盒模型中元素的尺寸（'-'或数字），可修改元素的尺寸；如下图：

在中输入查找文本，可查找指定的css属性名与属性值；
- 查看CSS文件的样式使用率：按Ctrl+Shift+P或Command+Shift+P（Mac） 打开命令行面菜单，输入coverage，在显示的Coverage面板中，点击，则会重新加载页面，并在Coverage面板中显示每个文件(css，js)的代码使用率和页面总的代码使用率，如下图：（注：绿色代表已使用；红色代表未使用）
点击一个文件，可逐行查看代码的使用细节，如下图：

1-4、CSS复制

在某一个css声明块中，右击一条css声明，会弹出一个下拉框，如下图：

Copy declaration：复制属性名与属性值，CSS格式：property: value;
Copy property：只复制属性名property；
Copy value：只复制属性值value；
Copy rule：复制整个css规则；格式如下：

    selector[, selector] {    
        property: value;    
        property: value;    
        ...
    }

Copy declaration as JS： 复制属性名与属性值，JS格式： propertyInCamelCase: 'value'
Copy all declarations：复制全部的属性名与属性值，CSS格式：

    property: value;
    property: value;
    ...

**Copy all declarations as JS：**复制全部的属性名与属性值，JS格式：

propertyInCamelCase: 'value',
propertyInCamelCase: 'value',
...

1-5、查看flex与grid布局

flex与griddebugger的操作方式类似，下面以grid为例；

在Elements面板，当HTML元素的display: grid or display: inline-grid时；会有一个grid的小图标，如下图所示：

点击图中的grid图标，可以在切换显示/隐藏元素的网格布局覆盖层；如下图：

点击Layout标签，可以看到布局面板包含一个Grid区域，以及一些查看grid布局的选项；如下图：

可以看到，Grid区域包括Overlay display settings（覆盖层设置）和Grid overlays（网格覆盖层）两个部分：

覆盖层设置由两个部分组成：

1）有三个选项的下拉列表：

Hide line labels：隐藏行号或行名；
Show lines number：显示行号；
Show line names：显示行名；

2）一组复选框：

Show track sizes：切换显示/隐藏 track尺寸，格式：用户定义样式 - 实际尺寸，如图中：1fr - 93.07px, 2fr 186.13px;track尺寸会随着布局实时刷新；
Show area names：在区域块左上角显示/隐藏区域块名；如图中：top, side, main；
Extend grid lines：延长网格线止视口边缘；如图中：红色区域里‘---’，注：图中黄色边框为grid容器，黑色边框为视口；

网格覆盖层：

当页面有多个grid布局时，可以切换复选框显示/隐藏相应的网格覆盖层；
点击，可以修改网格覆盖层的颜色；
点击，可以高亮并滑动到页面上相应grid元素；

可以通过点击中的小图标，选择排列grid；如下图：

1-6、颜色选择器

在Styles面板中，选择并点击中的红色区域，会弹出颜色选择器弹框，如下图：

底色（Shades）：移动，单击，可选择颜色；
拾色器（Eyedropper）：切换开启/关闭拾色器，开启状态下，可以拾取页面或屏幕上的颜色；（很实用，o(￣▽￣)ブ）
复制（Copy To Clipboard.）：复制4中显示值到剪切板；
显示值（Display Value）：颜色的RGBA, HSLA, HWBA, Hex表示；
调色板（Color Palette）：选中会应用该方框的颜色；
色调（Hue）：表示HSLA格式下颜色的底色，值：0~360；
透明度（Opacity）：0~1;
切换展示值（Display Value Switcher）：选择颜色格式，RGBA, HSLA, HWBA, Hex；
切换调色板（Color Palette Switcher）： Material Design palette，custom palette, page colors palette；

1-7、值设置

当css属性值为数值时，下列快捷键可以调节属性值：

Alt+Up（ Windows, Linux）或Option+Up（Mac）：以速率0.1递增；
Up：当属性值为-1或1时，以0.1速率递增；否则，以速率1递增；
Shift+Up：以速率10递增；
Ctrl+ Shift+page Up（Windows, Linux）或 Shift+Command+Up（Mac）：以速率100递增；

注：递减时，将Up替换成Down；

1-8、单位设置

当css属性值带长度单位时，可将鼠标悬浮在单位上，待单位下出现下划线后，选择单位：

当值为角度时，可单击的红色时钟图标，会出现一个放大的钟表图，可旋转指针调节角度值；

1-9、阴影编辑器

当样式规则中包含text-shadow与 box-shadow时，可通过阴影编辑器调节阴影：

Type：只对box-shadow有效，值：Outset | Inset；
X and Y offsets：拖动蓝点或输入进行设置；
Blur：滑动蓝点或输入进行设置，默认情况下，值：0~20，单位px；
Spread：只对box-shadow有效，滑动蓝点或输入进行设置，默认情况下，值：0~20，单位px；

2、console（待写）

3、sources

3-1、调式按钮

按F2打开Chrome开发者工具，选择source面板，可以看到上述一排按钮，

每个按钮的功能介绍如下：

Pause script execute： 执行直到断点处停止；Resume script execute：继续执行，到下一处断点处停止，或程序结束；
Step over next function call：当暂停处代码含有与问题无关的函数时，不会进入函数，将直接执行函数；
Step into next function call：当暂停处代码含有与问题有关的函数时，会进入函数体，进一步查看函数；
Step out of current function：当暂停处代码的所在函数与当前问题无关时，直接执行函数的剩余代码；
Step：同Step into next function call；
Deactivate/activate breakpoints：禁用断点/启用断点；
[Don't] Pause on exceptions： 启用/禁用异常断点；

3-2、查看类型

1）当使用了webwork时，可点击线程切换到该线程上下文；

2）查看和编辑局部、闭包和全局属性；注：不可枚举属性为黑色；

观察自定义表达式

被观察的表达式会随着debugger的进行，自动刷新；

4）查看函数调用栈；注：从上到下对应者栈顶到栈底；

5）当函数内存在断点时，可以在调用栈中，选择该函数对应的栈帧，右击，选择重新执行该函数（有趣的是： 重新执行，只是将执行指针移动到函数体的开始处，函数参数并为重置，若函数体内部存在自增的变量，则变量按执行次数递增加一）；而不需要重新开始整个debugger流程；注：函数不能是异步函数或生成器函数

6）文本搜索与替换

按Ctrl + F或Command + F(Mac)， 会在代码编辑区显示上述图片；其中：

Aa：区分大小写；

.*：使用正则表达式；

AB：文本替换；

3-3、断点类型

代码行断点：当知道待调查的精确代码区域时，直接在某行代码处打断点；其中，在断点的行号上，右击，可以选择条件断点模式---断点在条件为真时生效；
DOM变化断点：切换到Elements面板，悬浮在特定HTML标签上右击，然后悬浮在弹出框的Break on， 选择DOM变化类型：

节点移除断点：当移除当前被选择节点时，触发暂停；
子树断点：在当前被选择节点下，新增与删除子节点，或修改子节点的内容时，触发暂停；注：修改子节点的属性不会触发断点；
属性变化断点：在当前被选择节点上，对其属性做新增、删除、修改操作时，触发暂停；
事件监听断点：在Event Listener Breakpoint下的选中某种事件类型，则当该类型的事件触发时，触发断点而暂停在该事件监听代码内；
异常断点：同3-1下第七条；

4、network

打开开发者工具，切换到网络面板，强制刷新重新加载页面，

4-1、记录网络请求

查看左上角的小圆圈，点击可切换开启/关闭请求记录，代表开启，代表关闭；
代表清除请求记录；
，点击复选框，可切换开启/禁止跨页面保存日志。使用场景：点击链接进行跳转时，希望保存当前页面的请求记录。
点击右上角的，点击的的复选框可开启/禁止快照捕获，开启时，可捕获页面加载过程中的快照，如下图：

一旦快照（如编号1）被捕获，可进行以下操作：

-   悬浮在某个快照上，会出现途中编号2的矩形区域中的***黄色***线条，其代表快照的捕获时机；
-   单击某个快照，可以过滤掉快照之后的请求，即，**只显示快照之前的请求**；
-   双击某个快照，可以放大查看快照；

重新发送XHR请求：选中某条XHR类型的请求记录，按R键，可重新发送该请求；
点击可打开网络条件面板，点击的复选框，可切换开启/禁用缓存；

4-2、过滤网络请求

可以输入或选择条件，过滤请求；

属性过滤：将置为蓝色打开过滤面板，输入特定的属性进行过滤，多个属性以 ' ' 隔开；可勾选Invert取反；属性列表如下图：

时间过滤：在概览窗格上单击并水平拖动，可显示处于在该时间段（高亮区域）内的请求；如下图：
媒体类型过滤：可选择请求资源的媒体类型进行过滤；如下图：
隐藏Data URL的资源：可勾选进行隐藏内嵌在其他资源中的Data URL资源的请求；

4-3、网络请求排序

默认情况下，请求列表以请求发起时间（Start Time）进行排序；可以设置修改排序基准；

以列进行排序：点击请求列表的表头中的任一列，则以该列进行排序（排序规则未知，可能字典顺序、数值顺序），双击可倒排列；
以请求活动状态进行排序：右击列表头，悬浮在Waterfall上，选择下列选项之一：
- Start Time：以请求的发起时间进行排列，发起时间越早的，越靠近顶部；
- Response Time：以请求的响应时间进行排序，响应时间越早，越靠近顶部；
- End Time：以请求的排队时间进行排序，排队时间越早，越靠近顶部；
- Total Duration：以请求从发起到建立连接，再到进行排序，结束时间越早，越靠近顶部；
- Latency：以延迟时间进行排序，结束时间越早，越靠近顶部；

4-4、网络分析

1）查看请求日志

请求日志中的每一行代表一份资源。每一列代表资源的特定信息。默认情况下，展示的列信息，如下图所示：

Name ：资源的URL，默认下，显示格式位：filename.ext[search][#hash]；悬浮，可查看资源完整的URL；
Status： HTTP响应状态码；
Type：请求资源的媒体类型；
Initiator：发起资源请求的文件URL，即发起者；单击可跳转到发起者的源代码；可能发起者：
- HTML parser：当HTML解析到<img>、<script>、<link rel="stylesheet">时，会发送获取相应资源的请求；
- Redirect：An HTTP redirect；
- Script：XMLHtttpRequst，Fetch;
- Other：点击链接，提交表单；
Time： total duration;
Waterfall： 资源请求活动状态不同阶段的图形表示，悬浮，可显示具体的活动信息；

2）查看发起者与与依赖

按住shift，悬浮在请求上，可查看请求的发起者与依赖，其中发起者为绿色，依赖为粉色；如下图：

3）查看加载事件

DevTools 在网络面板的多个地方，展示DOMContentLoaded and load 事件，如下图：

4）查看请求合计

DevTools 在网络日志的左下角，展示请求总数，请求传输的数据量，请求接受的数据量（未压缩），若在开启隐藏Data Url情况下，以"/"分隔隐藏前后的数据，如下图

5）查看资源压缩前后大小

点击右上角的，勾选中的复选框，可查看请求资源压缩前后的大小，如下图：

6）查看请求资源的时间细分

选中某一行请求资源的Name，点击，选择Timing标签，可查看请求资源各时间阶段细节，如下图：

细节列表如下：

Queueed：请求进入请求队列的时间点；某些情况下，请求发起后可能会先进入请求队列中进行排队，影响因素如下：

优先级：js，css等影响DOM数构建关键资源优先级较高，而img等外部资源优先级较低；优先级高会优先请求；
TCP连接数：在HTTP1.0与HTTP1.1下，每个请求源（Origin）只允许6个TCP连接；
缓存分配：浏览器给缓存分配内存；

Started：请求从请求队列出队并发出的时间点；

Queueing：请求在请求队列中的时长，等于 Started - Queueed;

Stalled：请求从启动到实际发出的时长，与Queueing没有明显区别；当没有发生代理或SSL时，称Queueing；当代理协商发生时，称Stalled；

DNS Lookup：域名查找，浏览器解析请求IP地址的时长；

Initial connection：浏览器建立TCP连接的时长；

Proxy negotiation：浏览器与代理服务器协商请求；

Request sent：请求发出的时长；

ServiceWorker Preparation：浏览器启动service worker的时间点；

Request to ServiceWorker：请求发送到service worker的时长；

Waiting(TTFB)：浏览器接收到响应的时长，等于1 round trip + 服务器处理得到响结果的时长;TTFB：Time To First Byte；

Content Download：浏览器正从网络或service worker接收响应，读取响应体的时长；

Receiving Push：浏览器正通过HTTP/2的服务器推送功能接收响应数据的时间点；

Reading Push：浏览器正读取先前接收的本地数据的时间点；

7）查看其他

点击Headers，Payload，Preview，Response，Cookies等标签，查看相关的信息；

5、performance

RAIL：是一个以用户为中心的结构化的性能模型，代表了web应用生命周期中四个不同的方面：响应（Response），动画（Animation），空闲（Idle）， Load（加载）。

5-1、运行时性能

DevTools Performance面板可以用来分析运行时性能（响应，动画，空闲）；

通常，插件会影响性能测量，为使浏览器在干净的状态下运行，以无痕模式的打开一个谷歌浏览器窗口。在窗口中输入Demo页面的地址：googlechrome.github.io/devtools-sa…

1）模拟手机CPU

移动设备的CPU性能远远低于台式机和笔记本电脑，当绘制页面时，可使用CPU Throttling来模拟页面在移动设备上的性能。

2）记录运行时记录

点击左上角的小圆圈，可切换开启/关闭记录运行时记录，表示关闭，表示开启；开启记录，如下图：
等待几秒，点击 click停止记录，处理数据并将处理结果展示到性能面板；

3）分析结果

观察FPS表，任何时候看到红色的长柱条，意味着帧率过低，可能会影响用户体验；

FPS表下是CPU 表，CPU 扇形表中的各柱条颜色对应底部Summary面板中的各扇形颜色，CPU 扇形表中充满颜色，表示CPU满负荷运行，几乎没有空闲，需要使用方法降低符合量；如下图：
将鼠标悬浮在FPS、CPU、NET图标上，可显示对应时刻的页面快照；
将鼠标悬浮在Frames区域，可显示特定帧的FPS，如下图：

4）打开FPS仪表盘

按Command+Shift+P (Mac) 或 Control+Shift+P (Windows, Linux)打开命令行菜单，输入Rendering，选择Show Rendering，在Rendering，选中，则可看到Frame Rate遮罩层出现在视口左上角；

5）查找性能瓶颈

Summary：当没有事件选中时，Summary面板会显示一段时间内的页面活动细节。页面的大部分时间用于Rendering，降低渲染时间，可提高页面性能；
Main：展开Main区域，会显示主线程活动的火焰图，横向表示记录时间，每个柱条表示一个事件，柱条越长，表示事件用时越长；纵向表示调用栈，顶部表示栈底，故靠近顶部的事件导致远离顶部的事件发生；

注：1）Summary，Main只显示被选中记录的数据信息；如下图黑色框中的部门；

2）Main中Animation Frame Fired事件左上角的红色小三角形，表示警告---该事件可能会导致性能问题；

Animation Frame Fired：点击Animation Frame Fired（AFF）事件，会显示该事件的详细信息，点击reval链接，会以红色（注：Chrome v-104下）高亮触发AFF事件的事件；点击 app.js:94链接，会跳转到AFF事件处理程序的源代码（注：Chrome v-104不会跳到源代码）；
在app.update下面（注：Chrome v-104下，途中不会显示app.update），会有大量的紫色的Layout事件，其左上角的红色小三角形，表示强制重流（forced reflow）; 应避免强制重流，如下图：

谷歌开发者---手册