浏览器骚操作
「学习Chrome DevTools 中的这些骚操作，你都知道吗？笔记~」
截图
F12 打开调试模式，Ctrl + Shift + P 调出命令面板，输入 screenshot 会自动补全四个指令，分别是
- 截取选择的内容区域
- 截取全图，相对的是整体界面，有滚动条可以截到全图
- 截取选择的节点，也就是我们当前选择的节点
- 截取当前可视区域
选择后会自动下载截取的图片~
这个还是满棒棒的
重新发 xhr 请求
选择对应的请求，右击 RePlay XHR 就可以了
这个很实用，不会再像以前刷新页面啦
拷贝输出内容
copy() 方法，可以复制一个变量，通过 Ctrl + V 可以粘贴出来
对我们打印的内容可以通过右击内容 Store as global variable 来赋值给一个 temp1 的变量，第二次会创建名为temp2 的值赋值，第三次..
复制 console.log 输出内容还是很有用的
查看 CSS/JS 覆盖率
这个是可以看到 CSS/JS 利用情况，通过压缩后文件的利用率去优化项目体积~
F12 打开调试模式，Ctrl + Shift + P 调出命令面板，输入 Show Coverage
绿色的为用到的代码，红色表示没有用到的代码
这个还行吧，希望以后能用到
keys values table
几个浏览器提供的查看对象的几个 API，keys 查看一个对象所有的 key, values 查看对象所有的 value，table 将对象的 key/value 创建一个表格展示出来
简单看一下示例
调试对象的时候还是很棒的
原文文章中还有 在控制台中使用上次操作的值 / 编辑页面上的任何文本 / 网络面板（Network）的幻灯片模式 / 动画检查 / 递增递减 CSS 属性值 / 在低端设备和弱网情况下进行测试 / 自定义 devtools / 自定义代码片段 Snippets / 将图片复制为数据 URI / 媒体查询 , 感兴趣的查看原文~
几个快速调试的方法
本文使用 mdnice 排版
