方法一：使用 Chrome inspect 调试手机页面
用处：同步手机画面，像调试 pc 页一样使用 devtools 调试手机页面
1. 用USB线连接手机和PC
2. 手机调到开发者模式（不同机型不同，可自行搜索）
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 请求地址。
这里我的配置是 代理所有的 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 相关用法。