真机调试白屏_手把手教你移动端网页调试

开发移动端页面，如何使用真机调试呢？

针对安卓系统！

苹果系统用户关注完公众号，就可以离开了。

网上提供了两种解决方案：

1. 手机连接PC端的Fiddler代理，通过fiddler查看手机上的请求

2. 使用谷歌浏览器的 remote devices 工具调试

第一种方案，需要在手机上手动设置代理，配置fiddler，涉及到https的请求，还要安装证书，比较麻烦。有兴趣的小伙伴可以自行百度。

第二种方案，更麻烦。。。。。。。本篇文章重点介绍一下这个方案的操作步骤。

1、在手机上安装Chrome安卓版，安装包100多兆，安装后打开，发现白屏。不要慌张，起身接杯水，上个厕所，和同事唠会嗑，然后再看一眼手机，发现谷歌浏览器可以用。

2、开启手机上的“USB调试”

1. 设置 > 系统 > 关于手机 > 快速敲击“版本号”5次

2. 输入锁屏密码

3. 返回到步骤a中的“系统”

4. 发现多了一个子菜单“开发人员选项”

5. 进入后，打开“USB调试”

3、用充电线将手机和电脑相连

4、启动本地项目，查看服务所在端口号，一般是8080

5、拆分终端，查看本机IP

ipconfig

通过以上两步，你的项目就可以通过以下方式访问了：

// 我的项目在1024端口启动http://xxx.xx.xx.xx:1024

6、在电脑上打开谷歌浏览器，执行以下步骤：

1. F12调取开发者工具

2. 打开“远程设备”面板

   

7、这时候，你的手机应该是和电脑通过充电线连在一起的。如果面板上显示的没有连上任何设备。需要选择手机的链接模式：MIDI，然后再开启一遍“USB调试”，这时候手机上会弹出指纹数字串，确定就行。然后再次取消勾选下方的Discover，然后再勾选。贼恶心，有木有！

8、点击Connected，输入第5步中的网址，点击Open，就会在手机谷歌浏览器上打开当前正在开发的页面。这时候修改代码后，手机浏览器上的页面就会自动刷新。

9、为了更深入的调试网页，点击网址右侧的Inspect，就会打开一个新面板，专门调试手机上的页面。这一步需要饭强，是不是贼坑。

各个步骤懒得截图了，这篇文章都懒得写完了。