参考：1、https://developers.google.com/web/tools/chrome-devtools/javascript/
2、https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
3、https://developers.google.com/web/tools/chrome-devtools/javascript/reference
4、https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
5、https://developers.google.com/web/tools/chrome-devtools/#_7
无论是firefox还是chrome还是safari等主流浏览器，都有javascritp调试控制台---web控制台、开发者工具栏，各个浏览器界面不同，功能相识
mac下的快捷键：alt/option+command+i
1、firefox
2、chrome
3、safari
4、通过断点，可以查看变量的值，进行调试
5、自动异常断点
当代码执行出错时，可以自动断到出错的代码行上，直接分析出错时的运行时环境
6、选中元素（批量删除），查看元素在active/focus/hover/visited时的状态，并同时观察下面的css样式设置，然后修改css样式为自己喜欢的样式
7、查看元素的所以的class，以及class对应的css设置，然后去选择不同的class设置，查看css样式变化
8、当出现错误信息时，你可以看js的调用栈，下面的调用上面的
9、查看元素的事件，去选择“Ancestors All”
10、对页面进行检查
产生一些性能优化的建议：
11、性能查看
12、模拟无网络、各种网速情况下的页面展现情况
13、执行一段js代码
14、保存日志，使url不丢失；去除缓存，是浏览器不缓存，每次都重新下载
15、添加dom断点，这样就可以查看哪些js对这些元素属性进行修改了。DOM Break Point：比较有用的是在一个节点的attribute或者子树被修改时，触发断点，当你进行团队合作，找不到一个元素莫名其妙被谁的代码修改了，一个断点抓现行，哼哼，你今天的可乐有保证了
16、Event Listener Breakpoints的设置方法，选中相应的事件，当页面触发的时候，就会生效
