访问本地服务器

在开发机的Web服务器上托管一个站点,然后在Android设备上访问站点内容。

通过USB数据线和Chrome DevTools,您可以在开发机上运行站点,然后在Android设备上查看该网站。

TL;DR

  • 端口转发可以使你在Android设备上查看开发机Web服务器中的内容。
  • 如果你的Web服务器使用自定义域,您可以将Android设备设置为使用自定义域映射访问该域中的内容。

设置端口转发

端口转发功能可以让你的Android设备访问托管在开发机Web服务器上的内容。端口转发通过映射到开发机上TCP端口的Android设备上创建侦听TCP端口来工作。端口之间的流量通过链接Android设备和开发机之间的USB数据线传输,因此连接不依赖于你的网络配置。

若要启用端口转发︰

  • 在开发机和Android设备之间设置远程调试。当你完成后,您应该可以在Inspect Devices(检查设备)对话框的左侧菜单中看到你的Android设备,并且处于Connected(已连接)状态。
  • 在DevTools的Inspect Devices(检查设备)对话框中,勾选启用Port forwarding(端口转发)。
  • 点击Add rule(添加规则)。

    1.png

  • 在左侧的Device port(设备端口)文本字段中,输入你希望在Android设备上要访问站点的 localhost(本地主机)端口号。例如,如果你要访问localhost:5000网站,则输入5000
  • 在右侧的Local address(本地地址)文本字段中,输入你开发机的Web服务器上运行网站的IP地址或主机名,后跟端口号。例如,如果您的网站运行在localhost:7331上,则可以输入localhost:7331
  • 点击Add(添加)。

现在,端口转发已设置完成。您可以在Inspect Devices(检查设备)对话框中的设备选项卡上查看端口的状态指示器。

2.png

要查看内容,在你的Android设备上打开Chrome,然后打开您在Device port(设备端口)文本字段中指定的localhost端口。例如,如果在字段中输入5000,那么你将打开localhost:5000

映射自定义本地域

自定义域映射使你可以在Android设备上,查看来自正在使用自定义域的开发机上的Web服务器的内容。

例如,假设您的站点使用了只能在chrome.devtools白名单内才能工作的第三方JavaScript库。因此,您需要在开发机上的 hosts 文件中创建一个条目,将此域映射到localhost(例如:127.0.0.1 chrome.devtools)。设置自定义域映射和Port forwarding(端口转发)后,您可以在Android设备上查看在网址为chrome.devtools的网站。

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

要映射自定义域,必须在开发计算机上运行代理服务器。代理服务器的示例有CharlesSquidFiddler

要设置Port forwarding(端口转发)到代理:

  • 运行代理服务器并记下它使用的端口。注意:代理服务器和Web服务器必须在不同的端口上运行。
  • 设置Port forwarding(端口转发)到您的Android设备。对于Local address(本地地址)字段,输入localhost:,后面跟你代理服务器运行的端口。例如,如果它在端口8000上运行,那么您将输入localhost:8000。在Device port(设备端口)字段中只需要输入想在希望Android设备上进行监听的端口号,例如3333

在你的设备上配置 proxy 设置

接下来,您需要配置Android设备与代理服务器通信。

  1. 在Android装置上前往 Settings(设置) > Wi-Fi
  2. 长按您当前连接的网络的名称。 注意: 代理设置适用于每个网络。
  3. 点按Modify network(修改网络)。
  4. 点击Advanced options(高级选项)。 将显示代理设置。
  5. 点击Proxy(代理)菜单,然后选择Manual(手动)。
  6. Proxy hostname(代理主机名)字段中请输入localhost
  7. Proxy port(代理端口)字段中,输入你在上一部分说明中为Device port(设备端口)字段设置的端口号。
  8. 点击Save(保存)。

使用这些设置,你的设备将把其所有请求转发到开发机的代理上。代理代表你的设备发出请求,因此访问自定义域的问题才得以解决。

现在,你可以在Android设备访问自定义域,就像在开发机上一样。

如果你的Web服务器运行的是非标准端口,记住在Android设备请求内容时指定端口。例如,如果您的Web服务器在端口7331上使用自定义域chrome.devtools,当您从Android设备查看网站时,您应该使用网址chrome.devtools:7331

提示:要恢复正常浏览,请记得在断开开发机之后,还原Android设备上的代理设置。