移动端调试技巧总结

前言

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

移动端和PC端开发的区别

PC端

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

移动端

1. PC浏览器展示的效果可能和手机展示的效果不一致
2. ios和android手机兼容问题
3. 有些功能必须在手机上才能测试，比微信分享和微信支付等等

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

移动端调试技巧

H5移动端通用调试技巧

使用vconsole

vConsole 使用腾讯开源的vconsole调试

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

点击查看更多使用教程

使用抓包工具，抓取手机访问页面请求

• fiddler抓包工具总结
• whistle是基于Node实现的跨平台抓包调试代理工具

ios(苹果手机)调试技巧

ios使用Safari浏览器进行调试

1. 使用数据线把苹果手机和苹果电脑连接起来
2. 在苹果手机上使用Safari浏览器打开需要调试的网页
3. 打开苹果电脑中的Safari浏览器
4. 点击Safari浏览器 -> 开发 -> Mac name -> 调试页面地址
5. 调试和电脑端基本没有差异，电脑端修改样式等，手机立马变化

如图：

android(安卓手机)调试技巧

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

1. 使用数据线把安卓手机和电脑连接起来
2. 打开手机的usb调试功能
3. 在电脑上打开Chrome浏览器
4. 电脑chrome地址栏输入chrome://inspect进入后点击inspect即进入调试模式（注意：第一次调试必须翻墙）
5. 在安卓手机chrome浏览器上打开需要调试的网页
6. 调试和电脑端基本没有差异，电脑端修改样式等，手机立马变化

微信相关调试技巧

使用微信开发者工具

微信公众号开发

微信web开发者工具

小程序开发

微信开发者工具

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

如图：

安卓手机微信清理缓存

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

在手机上访问自己电脑启动本地服务的H5页面调试技巧（测试手机浏览器兼容问题必须掌握的高效调试技巧）

操作步骤

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

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

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

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

如图：

常见问题

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

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