web移动端 真机调试（chrome 浏览器）

【说明：

本人谷歌浏览器版本：98.0.4758.102（正式版本）

本人开发工具：微软的 Vscode 这里】

一、首先在你的PC以及移动端（Android）上装载有Chrome浏览器

下载谷歌浏览器

二、PC的设置

Chrom 浏览器地址栏中输入以下内容

chrome://inspect/#devices

你看到的应该是以下页面：（不要着急关闭该页面，连接手机成功后在次会加载出手机相关信息）

接下来我们点击 Port forwarding... 来设置端口号

注意端口号要和 vscode 以服务端打开方式的端口号 保持一致

我之所以上面的设置端口号为 5501 是因为我的 vscode 的服务端口为 5501

怎样查看 自己的 vscode 的服务端口号呢？

• 方法一：观察 vscode 右下角的状态栏

• 方法二：想必在之前你一定使用过 Open with Live Server 这款插件 并 以这种方式打开过指定页面
  • 以这种方式打开端口显示在地址栏中

三、移动端（Android）设置

首先你得准备一条可供连接的数据线（当然，原装的数据线更好）

打开手机 usb 调试功能（该功能一般处于 手机开发模式下）

【本人 手机 是 小米 ，进入开发模式下 打开 usb调试 功能 后连接电脑即可】

【初次打开 USB调试 功能后 可能会有安全提示】

连接电脑 选择传输文件（MTP）即可

四：后续操作

回到PC端的 chrome://inspect/#devices 看见自己连接的设备已经加载了出来

随后 我们打开移动端（Android）的Chrome 浏览器 ，在地址栏中输入

http://localhost:5501/

然后我们在 input 框内输入 想要去的地方 或者 想要调试的 路径【必须以服务器方式打开】 然后点击 open 即可在移动端的chrome浏览器中打开指定页面

想要打开控制台在手机上进行调试 可以 点击 inspect即可

可以参考我的博客地址： 点击这里