前端调试-JS

调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。

Alert

这种方法是通过内置于Window对象中的alert方法来调试的，即在源代码中插入alert(“xxxx”)或window.alert(“xxxx”)方法。

这是一种传统的，最简单的调试方法。随着JS在Web前端中能做的事情越来越多，责任越来越大，而地位也越来越重要。传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息，那个窗口着实不太美观，而且会遮挡部分页面内容，着实有些不太友好。

控制台console

       alert会阻碍页面的继续渲染(即执行到alert()方法时，当前流程暂时中止，需要手动关闭alert弹框，流程才能继续走下去)。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。所以，新一代的浏览器Firefox、Chrome，包括IE，都相继推出了JS调试控制台，支持使用类似"console.log(xxxx)"的形式插入源代码中，在控制台打印调试信息，而不直接影响页面显示。

console作为浏览内置对象，和控制台一起，给前端开发调试带来了极大的便利。为了代码整洁，在调试完成后，还是应尽可能删除这些与业务逻辑无关的调试代码。

JS断点调试

JS断点调试，即是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。为了能够观察到断点调试的效果。

开发者工具提供了几种断点设置，具体描述如下。

source断点

即在程序语句上设置 。

用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下。就设置好了断点。

浏览器面板上经常用到的source断点调试工具有

从左到右，各个图标表示的功能分别为：

• Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。

• Step over next function call：执行到下一步的函数调用（跳到下一行）。

• Step into next function call：进入当前函数。

• Step out of current function：跳出当前执行函数。

• Step，步进

• Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。

• Pause on exceptions：异常情况自动断点设置。

step into：单步执行，遇到子函数就进入并且继续单步执行（简而言之，进入子函数）；

step over：在单步执行时，在函数内遇到子函数时不会进入子函数内单步执行，而是将子函数整个执行完再停止，也就是把子函数整个作为一步。在不存在子函数的情况下是和step into效果一样的（简而言之，stepover越过子函数，但子函数会执行）。

step out：当单步执行到子函数内时，用step out就可以执行完子函数余下部分，并返回到上一层函数。

Event Listener Breakpoints

事件监听器断点，即根据事件名称进行断点设置。当事件被触发时，断点到事件绑定的位置。浏览器面板上事件监听器断点，列出了所有页面及脚本事件，包括：鼠标、键盘、动画、定时器、XHR等等。极大的降低了事件方面业务逻辑的调试难度。

如选择control下的blur，则在有blur绑定事件的输入框失去焦点的时候会触发这个事件，使用这可以跟踪脚本的执行流程