Chrome DevTools 常用面板攻略

前言

  我们经常用Chrome Dev Tools 来开发调试，但其实只是用了他一点点的功能。Chrome Dev Tools绝对是前端性能优化中性能分析的一把利器，而这个功能因为大家平时也相对较少用到，今天就是想将用 Chrome Dev Tools 进行页面性能分析的技能分享给大家，希望大家能在优化自己项目性能的时候更得心应手。

一、概述

1.1 简介

  Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。打开 Chrome 开发者工具的方式有：

• 在Chrome菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

1.2 DevTools 初步了解

  说实话，DevTools的UI可能有点让人不知所措……有这么多标签！但是，如果你花一些时间去熟悉每个选项卡，了解什么是可能的，你可能会发现DevTools可以大大提高你的工作效率。在网页鼠标右击-检查 或者 F12 打开DevTools，Chrome DevTools 主要包含以下10个部分：

序号	面板	说明
1	Device Mode-设备模式	打造移动设备优先的完全自适应式网站。注意：该模式不可替代真实设备测试
2	Elements-元素面板	元素面板，查看Web页面的HTML与CSS，最重要的是可以双击元素，对当前页面进行修改
3	Console-控制台面板	控制台面板。在这里可以查看到 JS 的错误信息，也可以执行键入的JS脚本
4	Sources-源代码面板	要用于查看web应用的资源列表和查看及调试js代码
5	Network-网络面板	页面中各种资源请求的情况。 这里能看到资源的名称、状态、使用的协议、资源类型、资源大小、资源时间线等情况
6	Performance-性能面板	页面各项性能指标的火焰图。这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等等信息
7	Memory-内存面板	可以记录某个时刻的页面内存情况，一般用于分析内存泄露
8	Application-应用面板	记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
9	Security-安全面板	安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS
10	Customize and control DevTools	主菜单

二、设备模式（Device Mode）

2.1 面板概述

  使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站，切换 Device Mode 按钮可以打开或关闭 Device Mode。

通过该视图控件，你可以设定下面两种模式：

1. 自适应。 使视口可以通过任意一侧的大手柄随意调整大小

2. 特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性
   

2.2 设备切换

默认是pc端的显示方式，点击后以移动端格式显示，再次点击便退回到pc端显示格式。

三、元素面板（Elements）

3.1 面板概述

  Chrome DevTools 的 Elements 面板是一个非常强大的工具，可帮助您深入了解和调试网页的 HTML、CSS 和 JavaScript。其可用于查看或修改HTML元素的属性、编辑DOM、编辑CSS属性、监听事件、断点等。也可以直接点击元素进行CSS、html修改，此修改只会在本地生效，不会上传到服务器端，所以可以用来调试前端代码。

3.2 编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式，如下图所示：

3.2.1 添加、启用和停用 CSS 类

  点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，可以执行以下操作：启用或停用当前与元素关联的类、向元素添加新类，如下图所示：

3.2.2 添加或移除动态样式

  我们可以在元素上手动设置动态伪类选择器，例如 :active、:focus、:hover 和 :visited。可以通过两种方式在元素上设置动态状态：

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

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

  

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

  Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标：

将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。

3.2.4 使用 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. 调色板选择器。 点击可以选择不同的模板。

3.3 编辑 DOM

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

3.3.1 查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器，如下图所示：

• 启用 Ancestors 复选框时查看祖先实体事件侦听器，即除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器
• 启用 Framework listeners 复选框时查看框架侦听器，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。

四、控制台面板（Console）

  在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互，可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看。

4.1 消息堆叠

  如果一条消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数，如下图所示：

如果倾向于为每一个日志使用一个独特的行条目，请在 DevTools 设置中启用 Show timestamps，如下图所示：

由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上，如下图所示：

4.2 选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector

  通常，会看到此环境设置为 top（页面的顶部框架）。其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，就需要从下拉菜单中选中它们。例如，如果要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，就需要从 Execution Context Selector 下拉菜单中选中该元素。

五、源代码面板（Sources）

  在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。调试JavaScript，保存在DevTools中所做的更改，保存并运行JavaScript片段，并将您在DevTools中所做的更改保存到磁盘。也用来查看加载的各种资源文件，比如js、css、图片等。

5.1 面板概述

打开Source面板，我们就会看到如下界面：

  根据上图三个区域对应分别是：资源区、工作区、控制台，其中，资源区分为如下部分：

名称	描述
Page	展示当前Web页面所包含的资源文件，在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置
Filesystem	当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区， 以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。
Overrides
Contentscript	用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间
Snippets	可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失

  而在工作区中，我们点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）

  而控制区这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮：

  上图调试按钮红框内，从左到右，各个图标表示的功能分别为：

  下面我们介绍一下调试按钮下面的各项功能

名称	描述
Watch	跟踪监控变量，点击"+"号添加变量名。
Call Stack	函数调用栈，显示执行路径。
Scope	查看属性作用域。
Beakpoints	查看属性作用域。
XHR/fetch Breakpoints	当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM Breakpoints	当改变一个节点或其子元素时所触发的断点。
Global Listeners	全局监听器，绑定在 window 对象上的事件。
Event Listener Breakpoints	事件发生时所触发的断点。

5.2 格式化混淆代码

在某些情况下，我们需要对混淆的代码做一定的调试，但这是我们看到的代码是乱成一团，毫无格式可言：

那我们可以点击下方的格式化按钮对代码进行格式化：

5.2 断点调试

5.2.1 代码行断点

  当我们知道需要调试的代码的确切位置的时候，使用代码行断点。想要使用 DevTools 设置代码行断点，则需要点击 Sources 选项卡，打开包含您想要调试的代码行的文件并找到该代码行，点击左边的行号，这样一个蓝色图标就显示在行号上，表明该代码行设置好断点了。

  当然我们也可以在代码中使用 debugger 来设置代码行断点，效果和在 DevTools 中设置是一样的。

5.2.2 条件代码行断点

  当我们知道需要调试的代码的确切位置且在满足条件下才调试的时候，使用条件代码行断点。想要设置条件的代码行断点，这就需要点击 Sources 选项卡，打开包含想要调试的代码行的文件并找到该代码行，右键点击左边的行号，选择添加条件断点。然后代码行下面会显示一个对话框，在对话框中输入你的条件，按Enter激活断点，行号上出现橙色图标。

5.2.3 事件监听器断点

  当想要暂停事件侦听器代码时，使用事件侦听器断点。想要设置事件监听器断点，这就需要点击 Sources 选项卡，展开 “Event Listener Breakpoints” 窗格（DevTools显示事件类别），选中这些类别中的一个可以暂停该类别的任何事件，或者展开类别并检查特定事件。

5.2.4 异常断点

  当您想暂停引发捕获或未捕获异常的代码行时，使用异常断点。想要设置异常断点，就需要点击 Sources 选项卡，点击暂停，启用后变成蓝色。如果除了未捕获的异常外，还想暂停捕获的异常，请选中 “Pause on caught exceptions” 复选框。

六、Network 面板

6.1 面板概述

  每个文件的加载、请求的发送都是一次网络交互，在Network面板中能够看到所需资源文件是否被加载、请求的接口到底返回了没有、能够知道哪个资源没载完从而导致整个web的呈现等等。Netwrok面板中会记录应用程序的每一次网络交互信息，每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等……按区域划分大概分为如下几个区域：

• Controls - 控制 Network 功能选项，以及一些展示外观
• Filters - 控制在 Requests Table 中显示哪些类型的资源
• Overview - 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索
• Requests Table - 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列
• Summary - 可以一目了然地看到页面的请求总数、传输的数据总量、加载时间

6.2 Requests Table 区域

标题栏的对应描述：

• Name(名称): 资源的名称。
• Status(状态): HTTP 状态代码。
• Type(类型): 请求的资源的 MIME 类型。
• Initiator(发起): 发起请求的对象或进程。它可能有以下几种值：
  • Parser(解析器): Chrome 的 HTML 解析器发起了请求。
  • Redirect(重定向): HTTP 重定向启动了请求。
  • Script(脚本): 脚本启动了请求。
  • Other(其他): 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。
• Size(大小): 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。
• Time(时间): 总持续时间，从请求的开始到接收响应中的最后一个字节
• Timeline/Waterfall(时间轴): 显示所有网络请求的可视化统计信息

6.3 查看 HTTP 相关信息

6.3.1 查看网络请求的参数

  可以通过点击 query string parameters (查询字符串参数)旁边的 view URL encoded (查看 URL 编码)或 view decoded (查看解码)链接，查看 URL 编码或解码格式的 query string parameters (查询字符串参数)。在使用 postman 复制相关入参时尤其实用。

七、Performance 模块

7.1 面板概述

  在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。相较于 Network 面板，不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息，如下图所示：

1. 录制一段时间
2. 重启页面，录制整个页面加载的过程。比较常用
3. 清除这一次性能录制的记录
4. 上传页面性能录制的数据
5. 下载页面性能录制的数据
6. 多次录制时可选择要展示的性能记录
7. 是否捕捉页面加载过程的截图
8. 是否记录内存变化
9. 垃圾回收，点击了即进行一次垃圾回收

八、Memory 面板

记录页面跟随时间的内存使用情况，如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

九、Application 面板

查看一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等。

十、Security 面板

调试当前网页的安全和认证等问题。

  如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。通过点击View certificate可以查看main origin的服务器证书信息。如果网页是不安全的，则会显示：This page is not secure.。

小结

把今天最好的表现当作明天最新的起点……．～

  投身于天地这熔炉，一个人可以被毁灭，但绝不会被打败！一旦决定了心中所想，便绝无动摇。迈向光明之路，注定荆棘丛生，自己选择的路，即使再荒谬、再艰难，跪着也要走下去！放弃，曾令人想要逃离，但绝境重生方为宿命。若结果并非所愿，那就在尘埃落定前奋力一搏！