从 Chrome 说起
从经历过浏览器大战之后，Chrome 的发展也是突飞猛进，市占率也是一路飙升，Chrome 浏览器凭借良好的兼容性以及完善的开发者体验，也成为了开发者手上的香饽饽。
Chrome DevTools 是一组内置在 Google Chrome 浏览器中的 web 开发者工具。凭借着简单、快捷、强大的功能，使得越来越受到开发者的青睐。正因为其功能强大，种类繁多，所以很多功能大家平时用不到，而到用的时候又想不起来，亦或者有一些技巧性的使用彩蛋没有发现。
本篇文章的目的：不会平铺去介绍 Devtools 的使用方法，而是通过分享一些实用的小技巧，帮助大家更愉快的使用 DevTools 工具 来进行日常 Debug。
Chrome Devtools 的主面板一共有十个，其中最常用的是：Elements、Console、Sources、Network、Performance 这五个面板。本次分享也会按照这 5 个面板的顺序来进行讲解。
如果本文中有你知道，而文中没有体现出来的奇技淫巧，欢迎添加评论，一起完善本文档。
Elements 面板
- Elements 面板主要用来操作、查看 DOM 元素 和 Style 样式
选中一个元素，右键菜单
- 复制粘贴元素 - 可以快速复制并粘贴一个元素，用在测试一些动态数据时特别好用， 比如：数据量大的滚动，布局等；
- 复制为 xx - 可以将元素复制为想要的格式，在自动化测试中用的比较多；
- 强制执行状态 - 可以让元素强制处于某一种点击态中，:hover， :focus， :active 等；比如：测一个元素在：hover 下的样式
- 发生中断的条件 - 可以设置一个 Dom BreakPoint，监听相应的变更；比如：测试一个 js 控制的元素样式，这个下面会再介绍
样式（Styles）
| 操作 | 示例 |
|---|---|
| 快速修改 flex，grid 布局- 选择对应属性之后会自动添加样式 | |
| 快速修改颜色的 Format- 按住 Shift + Cmd + 鼠标点击 | |
| 快速修改 box-shadow | |
| 快速修改过渡动画 | |
| 快速修改 css 的属性值（数值型）- 进入属性编辑状态之后 |
- 正常上下键 加减 1 个单位
- Shift + 上下键 * 10
- Cmd + 上下键 * 100
- Option + 上下键 * 0.1 |  |
| 快速复制自己辛苦调试好的样式- 选中这个区域，鼠标右键，可以复制 css 样式，也可以复制成 js 格式 | |
| - :hov - 强制执行状态，跟上面的一样
-
.cls - 快速增加一个样式
-
「+」号 - 快速 copy 一份当前元素的样式选择器 |
| | - 当出现属性覆盖的时候，快速查找生效样式来源
- Computed 二级面板也可以查看 |
|
- Computed 二级面板也可以查看 |
布局（Layout）
主要用来查看页面中的 Grid 布局和 Flex 布局， 其中 Grid 布局可以设置一些显示属性，在调整 grid 样式时使用
事件监听器（Event Listeners）
可以查看某一个元素上都绑定了哪些事件，以及这些事件的来源。在某些 debug 场景下，你可以通过移除某些事件来追踪原因
Dom 断点（Dom Breakpoints）
当你想要 debug 一个需要在特定场景下才会展示 Dom 时，非常有用。例如：鼠标悬浮的时候出现 tips，想要去调整 tips 里的内容和样式，但是当鼠标移走了，tips 的 dom 就立刻消失。这种场景就可以利用 Dom 断点让元素留在页面上。
属性（Properties）
- 可以快速查看某个元素上的所有属性
Console 面板
- 一个 runtime 的轻量编辑器，可以在里面编写任意的 js 代码，并查看代码执行的结果
Console 中的特殊变量和内置方法
| 变量名/方法名 | 作用 |
|---|---|
| $_ | 最近一次表达式或者函数的返回值 |
| 1, 3, $4 | 最近选过的 5 个 DOM 元素，1 是次近的， 依次类推 |
| $(selector [, startNode]) | document.querySelector()的快捷方式 |
| $$(selector [, startNode]) | document.querySelectorAll()的快捷方式 |
| $x(path [, startNode]) | 通过 Xpath 的路径来获取 Dom，返回 Dom 数组 |
| copy(object) | 复制一个对象，新版浏览器一般不用了，在 console 里直接右键复制对象即可 |
| debug(fn)/undebug(fn) | 给一个方法增加 debug 模式，执行方法会直接在第一行 debug，在我们进行 debug 的时候，给一些不好加断点的方法使用 debug 包裹，有奇效；不过要注意 debug 时的上下文； |
| [un]monitor(fn) | 给函数增加一个调用提示，当函数调用时会打印出函数名称和参数 |
| [un]monitorEvents(object[, events]) | 监听对象上某一个事件的触发 |
| queryObjects(Constructor) | 可以查看当前 Scope 下，引用该构造函数的所有值 |
Console.xx 的花式玩法
| 方法 | 示例 |
|---|---|
| count([label]) / countReset([label]) | 用来计数 |
| group(label) / groupCollapsed(label) / groupEnd(label) | 分组打印 |
| dir(object) / dirxml(node) | dir - 把 dom 对象转换成 js 对象打印dirxml - 转换成 xml 打印，新版浏览器现在默认都是 xml 展示 |
| table(array[, columns]) | 用 table 的样式来展示打印数据，有的数据属性太多的时候，可以用这个过滤一下 |
| time([label]) / timeEnd([label]) | 用来计时 |
| trace() | 打印出函数调用栈 |
| log() |
其他快捷操作
| 操作 | 示例 |
|---|---|
| $i - 安装 chrome 扩展：Console importer | 可以在 console 中直接使用第三方库，快捷测试 |
| 创建一些实时的表达式， 动态观察输出结果 |
Source 面板
- 我们主要使用 source 面板来查看，编辑，debug 代码
快捷操作
| 操作 | |
|---|---|
| 快速打开一个文件- Cmd + P | |
| 快速打开命令面板，里面有很多快捷的命令可以用- Cmd + Shift + P | |
| 将（Page）分组展示 | |
| 将本地文件夹加入 workSpace，然后可以在 Devtools 直接修改代码，会同步到本地- 在开发 node 的时候使用 inspect，可以边开发边 debug，体验很好 |
- 需要注意，引入太多的本地文件夹会引起浏览器卡顿 |
| | 保存在 Devtools 中的代码片段，可以快速执行，例如写个抢票的脚本之类的 |
|
面板介绍
代码断点类型
| 断点类型 | 作用 |
|---|---|
| - 正常断点 |
- 代码执行到断点后，暂停，进入手动 debug 模式 |  |
| - 条件断点
- 断点表达式返回 true 时才会暂停进入手动 debug 模式，非常适合用于异常情况或者满足某种条件时的 debug 场景 |  |
| - 条件断点之打印
- 利用条件断点，来执行 console.xx()
- log 数据使用打印断点即可 |  |
| - 打印断点
- 不暂停代码，只进行打印， 输入框就是 console.log 的参数 |  |
代码步进策略
| 代码步进策略 | 作用 |
|---|---|
| - 跳过当前断点，进入下一个断点，如果没有断点，就正常执行 |
-
长按：
- 所有断点停用 500ms 之后恢复
- 终止当前的 JavaScript 调用
| |
| - 单步调试，逐行执行（不进入函数内部） | |
| - 进入到下一个函数内部并暂停 | |
| - 跳出当前函数并暂停 | |
| - 单步调试，每一步都会执行 | |
| - 使所有断点失效 | |
| - 遇到异常就暂停 |
Debug 区域说明
| 区域 | 作用 |
|---|---|
| - Watch 区域 |
- 暂停代码之后，Watch 区域可以添加当前作用域下变量的监控；手动输入，或者点击变量右键 - 菜单“Add Selected text to watches”除了 Watch 区域可以监控变量以外- 鼠标选中变量也可以直接查看
- 使用 ESC 键快速调起 Console 副面板，这时候 Console 就处于当前代码暂停的作用域下，可以随便操作 |
| | Scope 区域- 作用域链，可以查看当前代码暂停的完整作用域，还可以观察到闭包，以及变量来自于那个作用域 |
| | CallStack 区域- 函数调用堆栈，可以通过点击堆栈，让代码回到某一个调用函数里，上下文也会切换到该函数的上下文 |
| | XHR/Fetch Breakpoints 区域- 当发生 XHR 或者 fetch 事件时，暂停代码进入 debug 模式，一般不用这个来 debug，主要用这个来查找代码；例如想快速定位到/api/xxx 接口触发时的方法在那个文件，触发之后，在 call stack 区域里去查找对应文件； |
| | Global Listener 区域- 可以看到所有的 Global Listeners 都是由那些代码来添加的，并且可以手动 remove 掉 |
| | Event Listener Breakpoints 区域- 这个断点不常用，一般要去对一个事件做监听，会使用以下方式
|
|
WorkSpaces
chrome 浏览器提供的本地编辑器的能力，可以理解是简单版的代码编辑，所有修改会同步给本地的文件系统；并且可以配合 debug 能力，边修改边 debug；一般情况下不太用它的编辑功能，比较简陋；我仅仅在进行 node 开发的时候会使用到 WorkSpaces 做一些简单的修改或者 debug；
在项目启动 node 时增加--inspect 参数，这时候，node 进程会监听浏览器，建立一个 ws 链接，默认监听：127.0.0.1:9229 和 9222 两个端口号， node 启动时可以看到 shell 信息
[hmr] start 'node -r ts-node/register --inspect bootstrap.ts'
Debugger listening on ws://127.0.0.1:9229/c2f3525e-03b9-4ae0-9ae0-759c04c9e616
For help, see: https://nodejs.org/en/docs/inspector
这时候，在浏览器控制台上，会有一个 node 的标志亮起
点击这个标志，会弹出 node 的 debug 界面
在这个界面里所有面板跟浏览器的用法一致， 差别点在于：Console 会打印 node 环境所有的日志信息， 只不过没有 dom 和 window 对象，与这些相关的方法也没有了；Source 面板也一样，没有 dom 相关的 debug 功能，只保留 js debug 能力
Network 面板
- 所有网络请求相关的内容，都可以在这里查看；
| 操作 | 示例 |
|---|---|
| - Preserve log页面刷新时，保留原来的网络日志，在测试某些 302,301 跳转的时候很好用，例如：测试 sso 登录等- Disable cache禁用浏览器缓存，所有请求都会增加一个 header cache-control：no-cache- No throttling、fast、slow、Offline模拟网络状态，可以模拟网速好坏或者断网的表现；也可以利用这个特性做测试的时候断网，让请求不发出去；比如，你在查一个编辑的 bug，想看一下提交的数据是不是符合预期，那么在点击的时候断网就行（也可以直接屏蔽该接口，实现断网查看）- 上传/下载可以把现在 Devtools 中的网络日志下载下来或者使用其他人下载的文件，在本地回放；这个功能在某些场景下也很好用，比如某一个 bug 只在某个人或者一部分人浏览器上才会复现（网络相关的），远程共享屏幕又不太好跟踪，可以让他下载下来，导入到自己本地查看； | |
| - 过滤配置 | - Filter 的类型筛选，多个条件使用空格分开， 等同于 And 的逻辑；旁边的 Invert 就是取反， |
| - 选中一个请求右键 |
-
有很多比较实用的功能
- 清空缓存
- 清空 cookie
- 复制成各种请求格式
- 请求重放
- header 展示信息配置 |
|
Performance 面板
Chrome DevTools Performance 功能详解 - 掘金，该文章对于 Performance 面板的讲解已经非常详细，这里不在过多赘述。
相关资料
