其他分享
首页 > 其他分享> > 如何用手机进行本地前端调试(示例代码)

如何用手机进行本地前端调试(示例代码)

作者:互联网

在做前端开发时需要进行真机测试和调试,除了进行远程调试,我们能不能在本地就实现手机调试呢?

一般我们会用chrome来模拟移动设备显示效果,但还是有很多情况到了移动设备上才会出现。所以在进行响应式开发时,最好应该先进行移动设备真机调试

先说明一下我的环境:Win 10 + Android手机 + chrome(desktop&app)

第一步:连接电脑与手机

1. 手机打开“开发者选项”

安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次(或其他的版本号位置,一个个试肯定有……)

然后“开发者选项”就出现在“设置”里面了。

2. 手机打开“USB调试”

进入“开发者选项”—>打开“USB调试”(如果想手机长亮还要打开“不锁定屏幕”)

3. 连接并允许调试

用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”(可能会晚点出现,先去第二步)

第二步:用电脑启动手机浏览

1. 打开chrome的inspect

在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”

如无意外在Devices中会出现手机型号。

如果没有,再确认下:开发者选项、USB调试、允许该计算机调试

2. 手机打开chrome app

在手机中打开chrome,这时电脑的chrome inspect中会出现输网址的地方。

3. 测试手机浏览的控制

在电脑chrome inspect输入框中随便输个在线网址,点Open,手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭,但是用来调试的inspect点开是空白,应该是被墙了。

第三步:用手机测试本地页面

1. 开启本地服务器

对的,很遗憾手机chrome不能进行静态页面的调试。

所以必须开本地服务器,所幸现在有gulp+webserver,用法这里不讲了。

总之,完成这一点后,你应该在电脑上用 http://localhost 来浏览网页了。

2. 电脑chrome开启端口转发

在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去(比如8000和localhost:8000)—>勾选“Enable port forwarding”—>Done

3. 打开手机浏览localhost

如:输入http://localhost:8000 点Open

这样手机就能打开页面了。

第四步:恢复inspect功能进行调试

还能怎么办,FQ呗。

标签:示例,chrome,前端,inspect,电脑,手机,打开,调试
来源: https://blog.csdn.net/ana_9717/article/details/121141777