前端开发中的JS调试技巧

摘要：

文章转自 百码山庄 本文主要讲解了前端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图看看他的效果：