移动端调试技巧总结

前言

工欲善其事，必先利其器。熟练掌握前端调试技巧能极大的提高我们开发的工作效率。

做过移动端和PC端的前端开发都知道，PC端调试代码比较简单，使用Chrome谷歌浏览器自带的开发者工具就能调试程序代码，能看到样式、请求、性能（加载时间）、资源、本地存储等等。

这些都是无法直接使用PC浏览器就能调试的，因此，开发移动端，必须要熟练掌握移动端的调试技巧，来提升我们的工作效率。

vConsole 使用腾讯开源的vconsole调试

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

ios使用Safari浏览器进行调试

如图： h5_ios_debug h5_ios_mobile

安卓手机使用Chrome浏览器进行调试

使用微信开发者工具

微信公众号开发

小程序开发

使用微信开发者工具能调试微信相关功能，比如使用微信js-sdk时，测试wx.config配置是否正确等

如图： h5_wx_public h5_mini_program

使用安卓手机微信浏览器打开debugx5.qq.com选择要清除的缓存内容

第一步：手机和电脑连接相同的wifi环境

第二步：把访问页面的本地localhost地址换成本地电脑IP地址（注意这个IP地址必须是电脑无线网络连接的IP地址），查看是否能正常访问

第三步：如果不能正常访问，把 webpack devServer 里面有个配置host 改成0.0.0.0

第四步：在手机上使用电脑无线网络连接的IP地址和端口，访问页面

如图：
mobile_debug_phone_demo mobile_debug_pc_ip mobile_debug_address

在手机上打不开自己本地启动服务的页面

查看wifi是否连接正确，手机和电脑访问的wifi环境必须相同
为什么使用本地IP地址打不开自己电脑的网页用localhost却可以 -> 解决方案：webpack devServer 里面有个配置host 改成0.0.0.0
查看访问的IP地址是否为电脑无线网络连接的IP地址