通过端口转发访问本地服务器和 Chrome 实例

Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova

您可以使用端口转发实现以下目的:

  • 情形 1:调试在其他 Chrome 实例上打开的标签页。
  • 情形 2:在开发机器网络服务器上托管网站,然后通过 USB 线从 Android 设备访问内容。

案例 2 中,端口转发通过 Android 设备上映射到开发机器上的 TCP 端口的监听 TCP 端口进行。端口之间的流量通过 Android 设备与开发计算机之间的 USB 连接传输,因此连接取决于您的网络配置。

此外,如果您的网络服务器使用的是自定义网域,您可以通过自定义网域映射将 Android 设备设置为访问该网域中的内容。

设置端口转发

根据您的具体情况,按照后续步骤操作。

案例 1:为另一个 Chrome 实例设置端口转发

  1. 使用 --remote-debugging-port=PORT 参数运行另一个 Chrome 实例,例如:

    MacOS

    open -a "Google Chrome" --args --remote-debugging-port=PORT
    

    Windows

    start chrome --remote-debugging-port=PORT
    

    Linux

    google-chrome --remote-debugging-port=PORT
    
  2. 在用于调试的 Chrome 实例中:

    1. 打开 chrome://inspect/#devices
    2. 确保已选中 复选框。 发现网络目标
    3. 点击相应复选框旁边的配置
    4. 目标发现设置中,输入 localhost:PORT,勾选 复选框。 启用端口转发,然后点击完成

      目标发现设置窗口。

    5. 返回到设备,您会看到一个新的远程目标。点击您要调试的标签页旁边的 inspect

      远程目标上的标签页旁边的检查链接。

  3. 系统会在设备模式下打开新的开发者工具窗口。在顶部的地址栏中,您可以输入要调试的网站的网址。

    设备模式下的开发者工具。

  4. 在地址栏的旁边,您可以切换输入法。

案例 2:为 Android 设备设置通过 USB 进行端口转发

  1. 在开发计算机和 Android 设备之间设置远程调试。完成后,您应该会在列表中看到您的 Android 设备。

    列表中的 Android 设备。

  2. 确保已选中 复选框。 发现 USB 设备

  3. 点击复选框旁边的端口转发

  4. 端口转发设置中,localhost:8080 已默认设置。选中启用端口转发

    端口转发设置。.

  5. 如果您要设置其他端口,请按照后续步骤操作。否则,请跳过这些步骤,然后点击完成

  6. 在左侧的端口文本字段中,输入您希望在 Android 设备上通过哪个端口号访问该网站。例如,如果您想通过 localhost:5000 访问该网站,则需要输入 5000

  7. 在右侧的 IP 地址和端口文本字段中,输入在开发机器的 Web 服务器上运行您的网站的 IP 地址或主机名,后跟端口号。例如,如果您的网站在 localhost:5000 上运行,请输入 localhost:5000

  8. 点击完成

端口转发现已设置完毕。您可以在顶部以及设备名称旁边看到端口转发的状态指示器。

端口转发状态。

如需查看这些内容,请在 Android 设备上打开 Chrome,然后前往您在设备端口字段中指定的 localhost 端口。例如,如果您在该字段中输入了 5000,则会转到 localhost:5000

映射到自定义本地网域

借助自定义网域映射,您可以在使用自定义网域的开发机器上的网络服务器上查看 Android 设备上的内容。

例如,假设您的网站使用的第三方 JavaScript 库仅适用于已列入许可名单的网域 chrome.devtools。因此,您需要在开发机器上的 hosts 文件中创建一个条目,以将此网域映射到 localhost(即 127.0.0.1 chrome.devtools)。设置自定义网域映射和端口转发后,您将能够在 Android 设备上的网址 chrome.devtools 上查看该网站。

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

要映射自定义网域,您必须在开发机器上运行代理服务器。代理服务器的示例包括 CharlesSquidFiddler

如需为代理设置端口转发,请执行以下操作:

  1. 运行代理服务器并记下其正在使用的端口。

  2. 为您的 Android 设备设置端口转发。对于本地地址字段,输入 localhost:,后跟运行代理服务器的端口。例如,如果在端口 8000 上运行,则应输入 localhost:8000。在 device port 字段中,输入您希望 Android 设备用于监听的号码,例如 3333

在设备上配置代理设置

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

  1. 在 Android 设备上,依次转到设置 > WLAN
  2. 长按您连接到的网络的名称。

  3. 点按修改网络

  4. 点按高级选项。系统会显示代理设置。

  5. 点按代理菜单,然后选择手动

  6. Proxy hostname(代理主机名)字段中,输入 localhost

  7. 代理端口字段中,输入您在上一部分中为设备端口输入的端口号。

  8. 点按保存

通过这些设置,您的设备会将所有请求转发到开发机器上的代理。代理会代表您的设备发出请求,以便正确解析发送到自定义本地网域的请求。

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

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