如何真机调试微信h5页面

最近在项目中接手微信环境h5页面的开发，主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。

目前项目暂时告一段落，希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~

由于微信环境、sdk的限制，在微信环境下如何有更加良好的调试体验还是有一些坑的，本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法（由于没有苹果手机，所以在开发自测时多以安卓系统为主要的测试环境）。

1.使用 Chrome 模拟移动设备进行调试

1.1 简单介绍

Device Mode 可以近似模拟出网页在移动设备上的显示效果，就是下面红框所示的，可以说是最常用的移动端 h5 调试方式，这里不过多进行介绍。

在项目中因为要在微信环境下调用sdk，其余浏览器不能调用相关sdk功能，所以会根据不同的 User Agent 将 h5 页面分为普通浏览器环境和微信环境有不同的业务逻辑（当然，根据不同的系统也会分 iOS 和 Android ）。

然而 Chrome Device Mode 只有如下的一些预设机型：