谷歌浏览器开发者工具系列1:如何访问本地搭建的服务

在本地建立起一个基础的开发环境的服务,然后在Android设备上访问其内容。使用一根USB数据线以及chrome开发者工具,可以实现用Android设备访问基于本地服务的站点内容。

设置端口转发

端口转发(Port forwarding)允许Android移动设备访问基于本地开发环境的服务器上的内容。端口转发的基本概念就是将移动设备上的TCP端口号映射到本地开发环境的TCP端口号。网络信号传输靠连接到两台设备上的数据线,不需要依靠无线网络。

具体步骤

下面开始端口转发的几个具体步骤:
1. 在Android设备和你的开发机器上设置远程调试(remote debuging)。完成后可以在Andorid机器上看到对应的列表。
2. 点击端口转发(Port forwarding)按钮。一般的默认值为localhost:8080
port forwarding - 谷歌浏览器开发者工具系列1:如何访问本地搭建的服务
3. 点击启用端口转发(Enable port forwarding)。如果你要使用其他端口,请继续阅读第四和第五条步骤。否则,可以直接跳过到第六个步骤。
4. 在左侧填写端口的文本框中,输入你想要端口号码。这个端口号就是你在Android设备上访问内容的端口号码。例如:如果你想通过localhost:5000访问网站,可以输入5000.
5. 在右侧输入IP地址的文本框中,输入你本地开发机器上设置服务运行地址和端口号。例如,如果你的本地服务是跑在localhost:7331,你可以输入localhost:7331
6. 点击完成(Done)

端口转发现在已经设置完成。你可以看到inspect界面上的状态提示,在顶部或者设备名称旁边都有。
QQ图片20220425162053 - 谷歌浏览器开发者工具系列1:如何访问本地搭建的服务
访问网站内容,首先打开Android上的浏览器输入localhost:和你再上面第四步输入的端口号。例如,如果你之前填的是5000,那么就输入localhost:5000.

映射自定义本地域名

自定义域名映射可以让Andorid设备访问一个使用了自定义域名的本地开发服务器域名。例如,假设你的网站使用了一个第三方脚本库,这个库只允许工作在chrome.devtools域名上。那你就可以在你的hosts文件里面创建一个入口,将其导航到localhost。在设置了自定义域名转换和接口映射之后。你就可以在android上使用chrome.devtools域名来访问了。

设置端口转换到代理服务器

要映射一个自定义的域名,需要首先设置一个代理。这个跟Charles,squid或者Fiddler这些工具是一样。
大概分为下面几个步骤:
1. 运行代理服务器并且注意这个端口是开放的。注意:代理服务和你的web服务必须运行在不同的端口上。
2. 设置Android设备的端口转发。如果是本地地址,输入localhost:+你的代理服务器运行的端口号。例如:如果它运行在8000端口上,你可以在设备端口文本框里面输入localhost:8000。它会运行你安卓的端口例如3333.

配置代理服务器到你的安卓设备上

  1. 接下来,你需要配置一下Android设备的通讯的代理服务:
  2. 打开设置-> Wi-Fi。
  3. 长按设备你正在连接的网络名称。注意:每个网络都需要单独设置代理。
  4. 点击修改网络
  5. 点击高级选项后展示设置代理展示。
  6. 点击代理菜单,选择手动配置。
  7. 代理域名栏中填入localhost
  8. 代理端口栏中,输入之前在设备端口号中设置过的端口号。
  9. 最后点击保存。

通过以上的这些设置,你的移动设备的请求都会被代理到对应的开发服务器上。你的设备的行为决定了请求时如何被代理的。请求到你自定义的域名的请求都会被转发掉。现在可以像本地开发机器一样在安卓设备上用代理服务器域名访问网站了。
如果你的web服务器是运行在非标准的端口之上,请记住,当Android设备请求内容的时候需要一个指定的端口。例如,如果你的web服务器使用了指定的域名是chrome.devtools,端口是7331,那么在Android设备上你需要用chrome.devtools:7331 这样的路径来访问。
提示:记得如果不需要用代理设置了,请按照上面的步骤还原Android设备与本地开发环境的代理关系即可。

发表回复 0