你所不知道的Chrome调试技巧

本文主要记录 Chrome日常开发中使用不多，但实用性很高的 隐藏buff,整理转载自掘金小册 《你所不知道的Chrome调试技巧》

快捷键篇

1. Command + shift + D 切换开发工具布局
2. ESC 显示或影藏 Drawer 工具栏

3. Command + shift + P 打开开发工具的快速定位工具

   1. 键入theme 切换 明、暗两种主题
   2. 键入Drawer 控制Drawer工具栏的的显示或者工具栏
   3. 键入screen 可选择截取当前浏览器页面内容
   4. 键入Live expression 注入JavaScript半持久脚本
4. show timestamaps 显示打印信息时间戳
5. h 在elements中键入可显示隐藏dom节点

控制台shell篇

1. copy() 可复制开发工具中的变量等内容到剪切板；比如打印了location层级很深的节点可以执行此命令
   
2. $[num] 如 $0输出选中的第一个dom节点,$1输出第二个
3. $、$$`第一个类似`document.QuerySelectorAll`如$('div')返回所有div节点，第二个类似`Array.from(document.querySelectorAll('div')) === $$('div')
4. $_、$i(返回上次的引用)、(down第三方module“需要安装对应插件但是自己试了无效”)
5. console.table()、console.dir()"返回dom中真实对象"、console.time()、console.timeEnd()
6. console.assert() 答应前先用第一个参数判断是否为真值，是的话再打印后续参数
7. monitor是 DevTools 的监听方法，用monitor包裹之后能打印方法进行追踪
8. monitorEvents是监听dom事件方法

network篇

1. 自定义请求表显示列;如 Method显示列、cache信息等
2. source - XHR/fetch breakpoint 传统网络断点捕获

Workspace篇

1. 使用工作空间可以直接修改该本地代码更新到浏览器中，将工程目录放置到source即可（不实用）

奇淫怪技巧

1. 添加持久化脚本：调试代码可存成代码块 sources -> snippets
   
2. Custom Formatter/window.devtoolsFormatters 自定义打印输出格式转换器
3. console.table(await function) 打印promise结果
4. console.log() 打印带有样式的log 如：console.log('%c this is a message','color:#0f0;')
   
5. Drawer可显示修改差异 如修改css之后，在Drawer栏目显示change即可对比修改差异

最后

以上小结是看完小册后，让自己眼前一亮或者支持记录的内容，详情可见小册，或者浏览如下地址
Developers.google.com
Google Chrome Developers - YouTube