前言

作为前端开发，Chrome（谷歌浏览器）是我们最常用的工具之一

本文会分成两部分，上篇介绍 chrome 开发者工具中一些常用功能，下篇介绍 chrome extension

宗旨是利用 chrome 自身的一些功能特性，来帮助我们提升开发效率

毕竟省下一分钟的时间，就多了一分钟的时间可以摸鱼（不是）

好了开始正题，首先我们从开发者工具中的 console 面板开始

console面板

拷贝变量

在控制台内，可以通过全局方法 copy()快速复制所需的变量至剪贴板

还可以通过 store object as global variable 将变量先保存下来，方便后面多次拷贝

判断真假

console.assert(expression, message)

如果第一个参数不为真，则打印输出后面的信息，且抛出错误

常用于替代 if(){throw err} 的逻辑，更快速地判断表达式的真假，为了简略也可以不传第二个参数

打印数组

console.table

当我们有了一个数组变量，使用console.log打印的结果可读性并不好

这时我们可以使用console.table来打印

甚至还可以给某个字段做排序，例如count：

console.table还可以在第二个参数传入一个数组，筛选出所关心的字段来展示

另外，对于简单结构的 object，也可以尝试用console.table来打印

我们有时需要打印多个对象，例如有两个 object1, object2

曾经的做法是我写两个console.log

console.log("object1", object1)
console.log("object2", object2)

但console.log其实也支持直接做对象打印，可以更方便地进行书写和展示

console.log({ object1, object2 })

打印DOM元素

console.dir

console.log和 console.dir 的区别在于前者打印的是DOM树的结构，而后者打印出的是对象的属性和方法

分析代码执行

执行次数

利用 console.count可以分析代码的执行次数

调用栈

使用 console.trace我们可以打印代码的调用栈信息

执行性能

当我们关心一段代码需要耗时多久时，可以在控制台使用console.time 和 console.timeEnd 进行统计

不过time和timeEnd还是偏简单了点，如果想要更方便地分析一段代码中各个部分所占的消耗，快速找到性能瓶颈，可以使用 console.profile 和 console.profileEnd

打印结束后，报告并不会在控制台呈现，需要到 moretools 中找到 JavaScript Profiler

从中可以看到这次函数调用共耗时 70.8 ms，其中函数A 耗时 39.4ms，函数C 耗时 23.6ms，函数B 耗时 7.9ms，性能消耗对比一目了然

log编组

console.group()

为了方便阅读 log，我们可能会用到编组功能

以console.group 开始 console.groupEnd 结尾，其中的内容会被编组展示

还可以支持嵌套编组

实时观测

我们可以新增一条表达式来实时打印当前的值

例如我们想查看当前的 active 元素，点击小眼睛，新增表达式：document.activeElement

当点击不同的元素时，该值也会随之发生变化

展示log时间

默认我们的控制台并不会显示 log 被打印的时间

我们可以使用 command + shift + p 呼出 command 面板

通过打开 show timestamps 来显示log时间，在某些场景可以更好地帮助我们定位问题

快速获取DOM元素

通过$语法，我们可以像jquery一样快速地获取我们想要的DOM元素

$0表示当前选中的DOM元素，$1是上一个选中的DOM元素，以此类推

还可以通过class名，id等快速获取元素

屏蔽某个log

有时候一些第三方文件会打印一些冗余的log出来，污染我们的控制台

可以通过 Hide messages from .... 来屏蔽来自某个文件的log信息

Elements面板

快速隐藏元素

选中DOM元素后，按下 h 即可快速实现元素的隐藏与显示

快速定位到元素所在位置

使用 scroll into view

快速切换class样式

点开 .cls 我们可以通过下面的选择框动态选择是否应用某个class，同时也可以方便添加新的 class

在这个操作区域，我们还可以点击:hover等，手动激活我们的一些伪类样式

事件监听

我们可以使用 monitorEvents 方法来监听某个DOM元素的事件

首先在 DOM 面板选中我们要监听的元素

然后使用 monitorEvents 来进行 click 事件的监听

使用unmonitorEvents 可以取消监听

查看DOM元素绑定事件

我们可以在元素面板中，查看各个元素下已绑定的一些事件

取消 Ancestors 勾选后，即可显示单单这个元素身上绑定的事件，否则会显示整个页面的事件

另一种方式是在控制台使用 getEventListeners方法

Network面板

高级过滤

请求我们可以很轻松地选择请求类型来过滤，不过如果我们想筛选所有的Get请求，就需要使用高级过滤了，在filter过滤框中输入 method:GET

相反，如果我们想选出所有 method!=Get 的请求，可以如下图搜索

在前面增加 - 即可

模拟网络环境

当想观察网站在不同网络环境下的表现时，可以使用该配置进行模拟切换

阻塞请求

在很多网站，某次请求如果返回错误页面就会重定向，这时如果想看看重定向前发生了什么，就可以使用 Request blocking 阻塞请求

重放请求

某些场景下想要重新观察某次请求，无需网页刷新，只需使用 Replay XHR 即可重放这次请求

复制请求

针对每次请求，可以通过右键 copy 很方便地复制各种形式的请求格式，在其他地方复放

请求耗时

使用 waterfall 可以观测单次请求在各个阶段所花的时间

Queuing ：排队
- 存在更高优先级的请求, 请求被渲染引擎推迟，这经常发生在 images（图像）上, 因为它被认为比关键资源（如脚本 / 样式）的优先级低。
- 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1。在等待一个即将被释放的不可用的 TCP socket
- 浏览器正在短暂分配磁盘缓存中的空间，生成磁盘缓存条目（通常非常快）
Stalled ：停滞
- 发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞，这个时间包括代理协商的时间。请求可能会因 Queueing 中描述的任何原因而停止。
DNS lookup ：DNS 查找
- 浏览器正在解析请求 IP 地址，页面上的每个新域都需要完整的往返 (roundtrip) 才能进行 DNS 查找
Initial connection：初始连接
- 建立连接所需的时间，包括 TCP 握手 / 重试和协商 SSL。
SSL handshake：完成 SSL 握手所用的时间
Request sent ：请求发送
- 发出网络请求所花费的时间，通常是几分之一毫秒。
Waiting（TTFB）：等待
- 等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还包括 1 次往返延迟时间及服务器准备响应所用的时间（服务器发送数据的延迟时间）
Content Download：内容下载
- 接收响应数据所花费的时间 (从接收到第一个字节开始，到下载完最后一个字节结束)