手机chrome浏览器真机调试PC端本地的项目

1.本次实验环境

操作系统: win10 10.0.19042

chrome浏览器PC端： 97.0.4692.99（正式版本） （64 位）

手机操作系统：Android 10; MIX 2S Build/QKQ1.190828.002

chrome浏览器手机端：96.0.4664.104

Android SDK Platform-Tools：https://developer.android.com/tools/releases/platform-tools?hl=zh-cn

2.前期准备

1. 将手机的开发者模式打开，不同手机可能打开的方式不同。（自行查阅如何给自己的手机打开开发者模式）
2. 用数据线将手机与电脑进行连接，并选择文件传输。（注意选择原装数据线，部分便宜的数据线只有充电功能，不能传输数据）
3. 手机端需要安装chrome浏览器（或kiwi浏览器）
4. PC 端的 chrome 需要比手机端的 chrome 版本要高

3.开始调试

1. 在命令行工具运行adb deivces命令，查看手机是否与电脑连接
   在电脑端的chrome浏览器中打开chrome://inspect/#devices，手机端打开chrome浏览器，如果页面出现了跟你手机相关的信息，说明连接成功了

   

2. 勾选Discover USB devices，配置Port forwarding settings，填写允许手机端访问的网址（例如电脑端运行了一个项目，通过localhost:9527进行访问）

   

3. 打开手机端的chrome浏览器，就可以访问localhost:9527

4. 点击inspect，将打开一个调试页面，跟手机端是同步的

   

写在最后

今天的干货就分享到这里。欢迎一键三连，持续关注“安前码后”，一个只输出干货而不是随大流的技术号。另外，赚钱的号“韭盾”，也在持续开发中，有投资兴趣的铁子们可以先关注，绝对是好物。 加油，铁子们。