前端调试技巧汇总

其实说到调试技巧，我相信现在会有很多种类的调试技巧，每个人都有自己的调试方式方法；

现在我把我自己的调试技巧总结一下，也许会对其他的小伙伴有帮助；

---

 

1.日志调试

         这种调试方案是最方便简明的，直接在需要调试的代码处console.log（xxx），可以直接打印出所需要的数据，一目了然；

添加console.log(),之后可以直接在控制台看到所需要打印的数据，可以根据这个数据进行调试，查看效果；但是有一个比较麻烦的地方，就是在prod环境的时候要屏蔽掉
console.log();当然现在构建工具是可以很轻松做到这一点的，不过也算是需要处理，难免也算一个麻烦的地方；
这种调试方法
推荐指数还是挺高的，3星吧；
2.Bom的alert
         这种调试方法很少使用，因为限制太多，用户体验太差，而且数据不全，当调试数据是Object的时候，会出现[object Object]，这样的显示，而且会直接阻断浏览器进程，用户体验较差，且数据并不完善，各个浏览器弹出的样式还不统一一致；但是使用起来也是很简单，直接alert（xxxx）即可，不过如果prod环境没有删除的话。会出现非常差的用户体验。
因此不推荐；
3.debugger
        这种调试方案其实来自于java，使用方式也是很简单，直接在代码中需要断点的地方，直接debugger即可，当js执行到该语句的时候，会自动暂停，页面会出现蒙层卡住，然后会自动跳转到debugger代码处，处于当前执行环境的数据将鼠标移动到该数据上会显示出来，是一种很简便的调试方法，不过后面一定要删除该语句，否则的话一旦用户不小心点开开发者工具（F12），就会进入debugger，也会影响用户体验的。

debugger

当点击页面中的前进按钮的时候就会跳转到下一个断点处，全部跳转完成后断点就会结束。
4.浏览器断点
        在浏览中断点其实是一种比较好的方式，可以省去删除代码中bedugger的方式，首先需要有项目源代码的soureceMap，webpack打包工具里面会默认开启sourceMap的配置，可以直接在浏览器里面断点，在行数的地方可以直接加上断点，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。

浏览器断点

 

5.移动端webview页面调试（android）
        目前chrome浏览器的话使用的较多，而且集成的开发者工具是目前比较好用的调试方案；
可以在浏览器地址里面输入：

chrome://inspect/#devices

        如果不想直接输入，也可以在chrome的扩展工具里面下载adb这个插件，使用这个也是可以的；使用手机连接电脑后，默认弹窗后点击允许电脑调试即可可以在该页面中看到所需要调试的页面，下面会有对应的地址；
app如果不是原生，而是h5页面嵌入的话，也是可以直接进行调试的；调试方法上面已经说过了，哪一种都是可以的

6.移动端webview页面调试 （ios）
        目前市面上基本使用safari浏览器中的开发页面进行调试，但是必须要基于ios系统，window系统的话，这个是不可以调试的。

        不过在github上提供了一种方式，就是使用ios-webkit-debug-proxy这个插件，
        使用前需要在iphone的设置中开启safari-》高级-》-》Web检查器；
        之后一般电脑里面都安装了node吧，如果没有的话，可以安装一下node，挺方便的。
        之后通过node的安装命令

npm install ios-webkit-debug-proxy -g

       安装之后需要启动ios-webkit-debug-proxy

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

   开启之后，会显示

Listing devices on :9221
Connected :9222 to iphoneName

  之后在浏览器器里面打开

  localhost：9221
  打开的话里面就可以进行调试了，将iphone连接到电脑上就可以调试手机页面了；

7.控制台调试
        其实还有一种比较投机的方法调试ios设备，当然android也是可以的，就是实际上ios设备内核使用的都是safari浏览器内核的，safari浏览器也都知道是ios的标配，windows系统是很少有safari浏览器的。

      但是实际上window也是可以安装safari浏览器的，只不过是有版本的限制，最高的版本肯定是不行的，目前根据苹果官网证明safari 5.1.7 for window是最后一个版本支持window的，这个版本的safari是可以下载到的。

       然后开启开发者模式，在这个浏览器里一般是可以模拟iphone手机的环境的，可以在这个控制台写一些具有兼容性的代码，看看执行的情况，往往是可以解决很多ios上莫名其妙的问题的，例如我之前就通过这个浏览器的控制台找到了一处时间的bug，因为ios是没办法解析'2018-12-12'这样的时间的，android是正常的，但是iphone手机就会出现nan年nan月nan日，部分兼容性的问题是可以在这里看到的；
同样，在这里也是可以书写js代码的，不确定的话，可以在写好测试好在直接code进源代码中；

标题

8.微信调试
        如果发现在微信中页面出现一些很诡异的地方，怎么调试呢？之前的话，微信在chrome的chrome://inspect/#devices是不可以调试的，现在已经可以了，不过之前不可以的时候，我也找到了一个微信提供的软件去调试，这个软件叫微信web开发者工具而不是微信开发者工具，都是微信官方提供的，名字只差一个web，但是功能可是千差万别的，
微信web开发者工具是调试页面的，具有调试功能；
微信开发者工具是开发小程序和微信的，不具备url单页面调试功能，当然项目是可以调试的；
这个具体的使用方法我就不多说了，程序里面写的很明确，我就不多赘述了；

      以上基本涉及了各个领域的调试技巧，因为是本人自行总结，可能会存在问题或者遗漏，如有发现的话，麻烦留言提出，谢谢！