chrome的调试技巧速览

强烈推荐谷歌浏览器调试技巧的小册子，一毛钱。以下内容仅仅是根据内容总结速览的，不推荐直接看~。
说起来，莫名看的很燃的感觉，哈哈哈~

copy & saving

可直接使用await，输入response = await fetch('https://jsonplaceholder.typicode.com/todos/1');json = await response.json()

输入value=null;console.assert(value,'value是空的')，value是falsy值是就会打印后面的
输入var a=1;var b=2;console.log({a,b});console.table({a,b})，就能将打印的值和变量对应
输入console.table(?('li'),['textContent','className'])，打印json数组的时候，特别方便，第二个参数是只想显示的key。当然对象也是没问题的~~~
输入console.dir($('body'))，dir可以轻松打印节点的具体信息
输入console.time('for');console.timeEnd('for')可以打印这两行代码执行的时间差，这个可以很方便的测试比如for循环执行了多长时间
输入console.log('%c需要输出的信息','color:#f69')，%c加style样式即可花样log
输入function log(message) { console.log(' '.repeat(new Error().stack.match(/\n/g).length - 2) + message ); };function a(){log('a');b()};function b(){log('b')};a()这时候log基于调用堆栈自动缩进
console.log可以直接在回调里。

右击断点的行号，可以编辑断点的执行条件，让断点在某种情况下才是断点
上面的是为这个功能服务的。既然每次在执行到断点的时候都执行编辑条件，索性可以在编辑条件这里打印想要的东西。然后不要的时候在breakpoints那里可以清除掉所有的条件。好处是，不污染代码，再也不用手动注释或者开始console代码。

一般只有一个控制台面板，但是你也可以像抽屉一样打开很多控制台面板，不同的控制台面板显示不同的tab，在一定情况哎也是很方便调试的。command+ shift+p输入drawer，选择玩法
可以模拟你在任何位置！command+ shift+p输入drawer，选择sensor就可以输入虚拟的位置。选定的值将被 navigator.geolocation.watchPosition（或 .getCurrentPosition ）报告。
可以模拟网速和ua！command+ shift+p输入drawer，选择network就可以随意了
可以快速看源码！command+ shift+p输入drawer，选择quick source就可以随意了
可以快速看多余的代码！command+ shift+p输入drawer，选择coverage，点击小圆点开始，然后点击具体的文件就看到红色和绿色区域了
可以快速比较修改前后的样式！command+ shift+p输入drawer，选择change