前端常见调试技巧

任何一个编程者都少不了要去调试代码。一般来说调试程序实在编码之后或测试期修改Bug时进行的。

• 写了一堆代码一运行控制台一片红，昨天还好好运行，今天就崩了，遇到问题之后没能调整好心态，不能一有问题就找人帮忙，不仅会打扰到别人，也不利于自身能力提升，只有当自己经过一番努力之后还是找不到解决办法时再去寻求帮助。

• 解决错误的前提就是要发现错误，对于简单的报错信息完全可利用调试工具的提示

• 直接报JS语法错误可直接解决，若是js报错但报错地点不是出问题的根源，找这个源就很令人头疼；还有就是js无报错，但是功能无效，这种找起来虽然不容易但最后解决的办法最容易。

• 如何找错？

  • 化繁为简 莫名其妙报错、不方便调试、只是看代码没法解释出错原因

    • 病因：js脚本冲突、css冲突、Dom的ID冲突、DOM标签缺失等多种冲突产生的bug
    • 排查：对代码进行区域删除，直至症状消失，最后一次删除的位置最有可能是导致错误的根源。进一步查找根源可在目标范围内来反复使用此方法
    • 注意点：
      • 对于js代码分别以功能、行为单位进行删除测试；
      • 对于html代码，由内向外，可以迅速发现tag缺失造成的错误，同时也要保证每次删除的都是整段的代码，避免因为删除产生新的错误。
      • 对于css代码，建议按照css文件，定义的class、行为单位批量进行删除测试

  • 顺藤摸瓜

    • 病因：基本语法错误、逻辑错误、不严谨，比如数组下标越界、null空指针导致的对象找不到，undefined为初始化、NaN数字计算错误等
    • 排查：利用葛洪调试工具进行跟踪代码

  • 反复对照

    • 普通方法不好定位
    • 病因：逻辑复杂、功能互相绑定难以剥离、页面对象内容复杂、兼容问题等
    • 排查可疑代码、细化功能点，修改一次测一次；以正常功能或出错功能的代码为原型，修改一个地方就形成一个备份，逐一测试，检查导致错误的根源。

  • 积累经验

    • 部分浏览器报错、事件响应异常、js操作Dom无效、PC和触屏系统功能不一致

    • 病因：各种兼容问题

1. 日志调试
   • 最方便简单的方式，直接在需要调试的代码处 console.log(xxxx)，可以直接打印出所需要的数据。
   • 添加之后可以直接在控制台看到所需打印的数据，但在prod环境时要屏蔽掉
2. console

   • document.body.contentEditable = true //让当前浏览器页面变成编辑器，可随意输入文字等内容

   • clear() //清空控制台和内存

   • console.log()用于输出普通信息

   • console.info()用于输出提示性信息

   • console.error()用于输出错误信息

   • console.warn()用于输出警示信息

   • console.debug()用于输出调试信息

   • 

   • console.count() 用于统计代码被执行的次数

3. alert
   • 使用较少，限制太多，用户体验不太好并且数据不全，当调试数据为Object时，会出现[object Object]这样显示没法知道对象中的属性和方法，且会直接阻断浏览器进程，用户体验较差，各个浏览器弹出的样式还不统一，使用简单，直接alert(xxx)即可，在prod环境要删除，不然用户体验差到极点。
4. debugger
   • 使用方式比较简单，直接在代码中需要断点的地方，直接debugger即可，当JS执行到该语句时会自动暂停，页面会出现蒙层卡住，然后会自动跳转到debugger代码处，处于当前执行环境的数据鼠标移上，该数据会显示出来，不过使用之后一定要删除该语句，否则用户进入开发者工具，就会进入debugger，会影响用户体验。
   • 当点击页面中的前进按钮时，就会跳转到下一个断点处，全部跳转完成后断点就会结束。
5. 浏览器断点(source断点)

   • 可以省去删除代码中debugger的方式。首先需要项目源代码的sourceMap、webpack打包工具里会默认开启sourceMap的配置，可以直接在浏览器里断点，在行数的地方可以直接加上断点，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也就相当于单步调试了。

   • 

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

     • Pause/Resume script execution（F8 或 Ctrl + \）：暂停/恢复脚本执行（程序执行到下一断点停止）；
     • Step over next function call（F10 或 Ctrl + '）：执行到下一步的函数调用（跳到下一行）；
     • Step into next function call（F11 或 Ctrl + ;）：进入当前函数；
     • Step out of current function（shift + F11 或 Ctrl + shift + ;）`：跳出当前执行函
     • Step（F9）：跳到下一条执行语句；
     • Deactive/Active all breakpoints: 关闭/开启所有断点（不会取消）；
     • Pause on exceptions: 异常情况自动断点设置，浏览器会在程序发生异常的那一行设置断点，即当程序会在异常发生处暂停；
6. 移动端webview页面调试(android)
   • 在chrome浏览器地址里输入chrome://inspect/#devices
   • 若是不想直接输入，也可以在chrome的拓展工具里下载adb这个插件，使用手机连接电脑后，默认弹窗后点击允许电脑调试即可在该页面中看到所需要调试的页面，之后就会有对应的地址。