Chrome调试小技巧
$的妙用
$_
$_是对上一次执行结果的引用。
$i
在Chrome插件Console Importer的帮助下，你可以快速在页面中通过console引入一些npm库。
$i("lodash");
_.VERSION; //loadash的版本
Store as global variable
我们可以将一些局部变量、console中定义的变量，设置为全局变量。
console.table()
当变量是一个数组或者对象的时候，我们可以使用console.table()，以表格的形式来打印变量。
console.time()和console.timeEnd()
- console.time() 启动计时器
- console.timeEnd() 结束计时器，并打印花费的时间
console.log 加上css样式
%c 指定CSS样式
console.log('%cAlvaro','color:green');
console.log直接在回调中使用
在不完全确定要将什么传递给回调函数。在这种情况下，建议在里面添加一个 console.log 来检查。
getJson(v=>console.log(v)) // 不要使用这种方式
getJson(console.log) // 会打印所有的参数
Elment Panel(元素面板)
‘h’来hide
我们可以在Elements选中我们想要隐藏的元素，按下h,可将该元素隐藏。截图的时候，它可以帮你隐藏到很多你不想展示的信息。
拖拽Dom
我们可以在Elements中拖拽元素到指定位置。
Copy selector
获取DOM元素选择器。
ctrl+shift+p
命令菜单，如果你还没有开始使用的话，立马使用吧。接下来介绍一下隐藏在其中的精华
截屏
>screen,可以对DOM结点截图，对当前页面截图，对全屏截图(Capture full siez screenshot)
给logs加上时间戳
>timestamps,可以为logs加上事件信息
coverage
coverage ,可以查看当前加载的js和css的哪些行正在被执行，并显示未使用字节的百分比。
控制台是异步的？
哈哈，这是不是出乎大多数人的意料。在如今这个Promise大行其道的时代，Console也不能落后。因此我们可以这样使用。
response=await fetch('https://localhost:8080/getjson');
json=response.json();
断点
除了常规的断点添加以后，Chrome提供了Conditional breakpoint(条件断点),，只有条件为true时，才会进入断点，在循环中条件断点特点好用。
结合Conditional breakpoint的技术，我们可以在源码的不同地方去添加console.log()/console.table()/console.time()等。他们会在不修改代码的情况下，一直执行。
另外还有Dom mutation 断点，当DOM元素结构改变(包括子结点修改，属性修改，结点删除)时，可以促发该断点。使用断点后，结合堆栈可找到不容易找到的业务代码。
Event Listener breakpoints 全局事件断点 当促发事件时，进入断点。
XHR/fetch breakpoints 当促发请求时，进入断点。
Snippets
我们可以使用javascript作为自动化工具来处理第三方网站和应用程序。利用Snppets，我们可以将自己构建的脚本存储起来。然后利用ctrl+shift+p ，!脚本来驱动脚本执行。
IDEA 调试技巧
计算变量
Alt+F8 计算当前选定的变量
一方面我们可以计算出变量的值，另一方面也可以通过它来修改变量的值，这样就方便了我们去尝试各种不同值的情况，而不是重新启动程序，重新赋值。
智能步入
当一行代码中出现多个方法时，避免了顺序的step into(F7) 。我们可以使用Smart step into(Shift+F7) 指定进入的方法。
中断Debug
有些时候，我们发现错误之后，我们不想走后面的流程了(比如对数据库进行Update,Delete,Post)。这个时候我们怎么办，一个最简单的方法就是关闭服务再启动程序。
这里我们推荐一个新的方法，在线程上面利用Force Return,强制返回来避免后续的流程。或者利用Throw exception