js调试方法

参考：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的设置方法，选中相应的事件，当页面触发的时候，就会生效