【说明:
本人谷歌浏览器版本:98.0.4758.102(正式版本)
本人开发工具:微软的 Vscode 这里】
一、首先在你的PC以及移动端(Android)上装载有Chrome浏览器
二、PC的设置
Chrom 浏览器地址栏中输入以下内容
chrome://inspect/#devices
你看到的应该是以下页面:(不要着急关闭该页面,连接手机成功后在次会加载出手机相关信息)
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221005401262.png)
接下来我们点击 Port forwarding... 来设置端口号
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221005750500.png)
注意端口号要和 vscode 以服务端打开方式的端口号 保持一致
我之所以上面的设置端口号为 5501 是因为我的 vscode 的服务端口为 5501
怎样查看 自己的 vscode 的服务端口号呢?
- 方法一:观察 vscode 右下角的状态栏
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221010748615.png)
- 方法二:想必在之前你一定使用过 Open with Live Server 这款插件 并 以这种方式打开过指定页面
- 以这种方式打开端口显示在地址栏中
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221011028462.png)
三、移动端(Android)设置
首先你得准备一条可供连接的数据线(当然,原装的数据线更好)
打开手机 usb 调试功能(该功能一般处于 手机开发模式下)
【本人 手机 是 小米 ,进入开发模式下 打开 usb调试 功能 后连接电脑即可】
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221012452720.png)
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221012552417.png)
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221012610954.png)
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221012625186.png)
【初次打开 USB调试 功能后 可能会有安全提示】
连接电脑 选择传输文件(MTP)即可
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221013220262.png)
四:后续操作
回到PC端的 chrome://inspect/#devices 看见自己连接的设备已经加载了出来
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221013702301.png)
随后 我们打开移动端(Android)的Chrome 浏览器 ,在地址栏中输入
http://localhost:5501/
然后我们在 input 框内输入 想要去的地方 或者 想要调试的 路径【必须以服务器方式打开】 然后点击 open 即可在移动端的chrome浏览器中打开指定页面
![](http://wordpress-1304452759.file.myqcloud.com/wp-content/uploads/2022/02/20220221014506926.png)
想要打开控制台在手机上进行调试 可以 点击 inspect即可
可以参考我的博客地址: 点击这里