前言

Chrome devtools 几乎是所有web 开发者必用的工具之一，笔者总结了一些日常开发调试用的小技巧，希望大家日常使用中可以方便一些。

小技巧

截图

还在找用什么工具来对网页截图？Devtools 完全可以满足要求。
核心路径：打开devtools 后，使用ctrl + shift + p 进入command 模式，输入screenshot。

截取当前/整个屏幕

按照字面意思，想展示当前viewport 显示的内容，直接使用Capture screenshot，便会截取显示内容。
想完整的截取整个网页，不用再去找什么滚动截图，各种插件，直接使用Capture full size screenshot.
当然，截图在Device mode 下也适用，甚至要更方便一些。
进入Device mode, 点开右上角菜单，即可看到功能项。同样的截图是以当前viewport 为标准。

节点截图

Devtools 可以对某个节点截取成图片，可以从command 选择Capture node screenshot，会截取Element tab 上所选择的节点。
当然，直接在所想截取的元素上右键打开菜单，更为方便。

选择元素到console 中

通常我们在console 中想要选择元素，需要使用Web API 接口，使用document.querySelector 等方法匹配元素，如果元素没有唯一标识，还需要写上一大堆选择器来匹配，或是去Element tab 中选择所需元素，Copy selector 后再由API 获取。常用的朋友或许会直接使用 $ 来代替document.querySelector api 来加快一点速度。
但我们还有着更快更方便的方法。

将选中元素设为全局变量

选中所需元素后右键调出菜单项，可以看到Store as global variable 选项。
选择该项后控制台会输出该变量。

直接在控制台访问选中元素

在Element tab 中选中所需元素后，devtools 默认将$0 变量设为所选元素。

使用Console

直接在source 设置log

正在浏览器调试中，想打个log 只能回到代码里去加？nonono。
在代码行处右键打开菜单项，点击Add logpoint, 输入变量名，回车添加（如下图logpoint为粉色）。
代码执行到此处便会将变量打印。
官方示例中使用类似字面量对象的方式打印变量，类似于token 为 { token }，这样更清晰一些（如下图）。
需要注意的是，类似字面量对象的方式仅仅是类似，它一次只能输出一个变量，无法将多个变量同时输出。

使用console.table 打印变量使其更清晰

console.table 是Web API 之一，它可以将数据以表格的形式展示。
它可以将数组或对象快速表格化，使其更直观的展示，同时在最末尾显示变量类型。可以直接使用简写 table( ) 方法。
如下图为bing 搜索页面小冰的请求，将数据存储为全局变量后打印出：

使用console.group 折叠log 信息

如果没有额外说明，大多数log 信息会混杂在一起，让人毫无头绪，使用console.group 方法则会将指定log 聚合为组，调试问题会更方便。
console.group() 方法指定组名， 也可用console.groupCollapsed() 方法，区别是groupCollapsed 默认将组内内容折叠起来。
console.groupEnd() 方法结束指定组。