摘要:
文章转自 百码山庄 本文主要讲解了前端JS的各种调试方法,也解决了我一直头疼的问题,前端框架内嵌JS,以至于我在浏览器Sources树中无法找到我要调试的代码。
更多调试请参考原文:
http://seejs.me/2016/03/27/jsdebugger/或是知乎(这里的答案更有含金量,介绍了Chrome Developer Tool的使用等)
https://www.zhihu.com/question/20260762
骨灰级调试大师Alert
相信这个大家肯定都知道,可以一行一行的进行判断,是否走到此处。不过弊端就是它会阻止下面代码的运行。
新一代调试王者Console
Firefox、Chrome,包括IE,都相继推出了JS调试控制台,支持使用类似”console.log(xxxx)”的形式,在控制台打印调试信息,而不直接影响页面显示。上图就是以IE为例。
不过,Chrome开发团队的想象力实在不得不让人佩服:
JS断点调试
JS断点调试,即是在浏览器开发者工具中为JS代码添加断点,让JS执行到某一特定位置停住,方便开发者对该处代码段的分析与逻辑处理。为了能够观察到断点调试的效果,我们预先随意准备一段JS代码:
Debugger断点
下边介绍的也就是我一直头疼的问题,有时候我们在开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码在Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点,此时”debugger;”就发挥作用了。我们直接通过gif图看看他的效果: