100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > web移动端 真机调试(chrome 浏览器)

web移动端 真机调试(chrome 浏览器)

时间:2020-05-01 05:58:13

相关推荐

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即可

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。