如何用手机进行本地前端调试

发布网友 发布时间：2022-04-19 12:31

我来回答

共2个回答

懂视网 时间：2022-05-14 11:04

原文翻译内容：

主机开发计算机网络服务器上的站点，然后从Android设备访问内容。

使用USB电缆和Chrome DevTools，可以运行从开发机器网站，然后查看该网站在Android设备上。

TL; DR

端口转发，您可以查看您的Android设备上从开发机器的Web服务器内容。

如果您的Web服务器使用的是自定义域，你可以设置你的Android设备在使用自定义域映射域访问内容。

设置端口转发

端口转发使您的Android设备到的正在开发计算机的Web服务器上访问内容。端口转发的工作原理是建立在Android设备上映射到一个TCP端口在开发机器上监听TCP端口。端口之间的通信通过Android设备和开发计算机之间的USB连接出行，因此连接不依赖于你的网络配置。

要启用端口转发：

设置远程调试您的开发机和Android设备之间。当你完成，你应该看到的左侧菜单Android设备检查设备对话框和 连接状态指示灯。

在检查设备在DevTools对话框中，启用端口转发。

点击添加规则。

热心网友 时间：2022-05-14 08:12

第一步：连接电脑与手机
 
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
这样手机就能打开页面了。