移动端h5调试方法总结

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

效果：同步手机画面，像调试 pc 页一样使用 devtools 调试手机页面

1. 用USB线连接手机和PC

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

3. 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 代理，抓包请求

效果：查看手机发出的所有请求详情

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

 

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

效果：在手机上实时跑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 相关用法。