移动端h5调试方法总结

方法一：使用 Chrome inspect 调试手机Webview页面

手机webview和电脑上同步，像调试浏览器页面一样使用 devtools 调试手机页面

1. 用USB线连接手机和电脑

2. 手机开启开发者模式（不同品牌不同操作，用户可自行搜索）

3. 手机开启USB调试

4. PC上打开Chrome浏览器。进入chrome://inspect/#devices。正常情况下会看到对应的手机和页面信息。

附：Chrome 官方指导文档 https://developers.google.com/web/tools/chrome-devtools/remote-debugging?utm_campaign=2016q3&utm_medium=redirect&utm_source=dcc

 

方法二：使用 Charles 代理，请求抓包

抓取手机发出的所有请求包，包括 http 和 https 请求

步骤可以看下方链接

https://juejin.im/post/5b61942a5188257f0b583bba

 

方法三：使用 Charles 在手机上实时跑 PC 端代码

1. 先跑通方法二，将手机上的请求代理到pc上，转由pc发出

2. 勾选 Charles 选项： Proxy -> MacOS Proxy

3. Charles 添加所需要代理的 https 请求地址。

Proxy -> SSL Proxying Settings

这里我的配置是 代理所有的 https 请求。配置因人而异。

4. 起前端代码服务。这里我起项目是跑 npm run dev，起在 localhost:3000

5. 配置 Charles 的 Map Remote。

Tools -> Map Remote

Map Remote 的作用是将所有命中 from 的流量全部转发到 to 上。

所以，from 需要配置成手机上的项目的地址 (https://h5.test.xxxx)，to配置为本地起的前端服务 (to: http://127.0.0.1:3000)

这样手机上获取的静态资源就会被转发到PC端，由其热更新实时产生。也就是说在pc上修改代码会实时在手机上看到更新。妙极了。

至于本地前端服务对 api 请求可以通过配置 webpack proxy 转发到后台去。不太明白的同学请另行查询 webpack proxy 相关用法。

 

方法四：IOS模拟器调试和查看各机型表现

1. 打开 MacOs 的 Terminal，命令行执行 open -a Simulator，系统会打开一个模拟手机，我的默认是iPhoneSE

2. 如果不是想要的机型，那么打开后，可以在 File->Open Device里选择想要的机型，系统会另外打开新的模拟器

3. 在模拟的手机上打开Safari浏览器，输入要调试的url。这里我输入的是起在本地localhost:3000的前端服务。

4. 打开Mac上自带的Safari，在 开发 选项下选择对应模拟器，右边会显示模拟器Safari的页面，选择一个页面。

5. 弹出该页面的控制台。至此就可以把本地代码跑在和iPhone上并快乐调试啦。