总结的掘金小册:你不知道的Chrome调试技巧里面的内容，部分有做总结，特别的章节满满的干货，就直接贴的链接。
通用：
Copying and saving
1、可通过copy拿到任何你能拿到的资源包括一些变量：copy(location)、copy($_)/copy($0)。
2、store as global：相对数据做额外的操作，但不想影响原来的值；对console中打印的数据，右击 它，并选择 “Store as global variable” (保存为全局变量) 选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2……
3、保存堆栈信息( Stack trace )，用console打印出堆栈跟踪信息保存成文件给同事降低沟通成本。
4、元素面板中依然支持ctrl+c复制到剪切板
快捷键和通用技巧
1、ctrl + shift + D (⌘ + shift + D Mac）切换dock面板的位置。一般是上一个位置和现在的位置的转换。
2、ctrl + [ 和 ctrl + ] 左右切换devtools面板(元素面板、控制面板、网络面板、应用面板那些)
3、shift+上键/下键:10倍增加/减少数值。上键/下键：1倍增加/减少数值。option+上键/下键：0.1倍增加/减少数值
4、[ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )打开command菜单
使用command
1、截屏：选中节点，打开command菜单，输入screen下面有几个选项，点击节点截屏或者全屏截屏
2、devtools一般是双面板布局：元素面板+资源面板。切换面板布局：在command中输入layout,点击下面的选项切换面板
3、切换主题：在command中输入theme，点击下面的选项切换主题，只有两种：黑色和白色
代码块的使用
1、保存代码块：进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，大功告成！现在就可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它了。
2、其他方式运行代码块：在command中输入"!"选择代码块敲回车执行
console
console中的”$”
1、$0:表示当前在element面板中选中的html节点的引用，以此类推：$1表示对上一次html节点的引用……一直到$4、如果在脚本中没有定义$的话，在console面板中：$=document.querySelector; $$(‘…’)==Array.from(document.querySelectorAll(‘...’))
3、$_表示对上一次执行结果的引用
Console.log中的bug？
1、console中打印出的对象，在打印之前是以引用的方式保存的。所以在改变一个对象中的值的前后console.log这个对象都输出的是改变之后的对象
2、console自动被 async 包裹，可以直接使用await
可以设置条件断点，条件成立时，断点会暂停代码的执行。所以可以在设置条件的地方写console.log来调试代码。
设置输出对象的格式
window.devtoolsFormatters = [{ header:function(){} , hasBody: function(){},body:{} }]
对象里面的属性分别表示：
- header : 处理如何展示在 console 的日志中的主要部分。
- hasbody : 如果你想显示一个用来展开对象的 ▶ 箭头，返回 true
- body : 定义将会被显示在展开部分的内容中。
控制台里面的方法：
1、控制台里面查找一个构造函数有多少个对象：queryObjects(constructor)
2、monitor(function)监听一个函数：它能够让你 “潜入” 到任何 _function calls(方法的调用)中：每当一个 被潜入的方法运行的时候，console 控制台会把它的实例打印出来，包含函数名以及调用它的参数 。
3、monitorEvents(节点，事件)监听一个节点的事件。当触发事件的时候就会打印出相应的事件对象
console中的骚操作
network中的骚操作
技巧合集
里面插入样式规则很好用。
Drawer常识
被隐藏在主窗口下面的平行选项卡，可通过esc打开，再按esc可关闭。
1、可以模拟网络状态：在线、快3G、慢3G、离线状态。
2、拿到script source。
3、检查代码coverage：可以跟踪当前加载的 JS 和 CSS 文件的 哪些行正在被执行 ，并显示 未使用字节的百分比 ，绿色表示正在使用。红色表示未使用。4、检查修改的内容change。像Git展示前后变化那样显示修改的内容。
workSpace技巧
在Chrome中直接修改代码。把项目的文件夹直接拖到 Source 面板，修改代码后ctrl+s保存修改，DevTools 会将你做出的修改同步到系统的文件中。这个可以用来添加修改样式。
参考：
你不知道的Chrome调试技巧：https://juejin.im/book/5c526902e51d4543805ef35e