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

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

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

  • 示例 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，选中 复选框。 启用端口转发，然后点击完成。

      “Target discovery settings”窗口。

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

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

  3. 系统会打开一个处于设备模式的新 DevTools 窗口。在顶部的地址栏中，您可以输入要调试的网站的网址。

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

  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，然后前往您在 Device port 字段中指定的 localhost 端口。例如，如果您在该字段中输入了 5000，则会转到 localhost:5000。

映射到自定义本地域名

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

例如，假设您的网站使用仅在许可名单网域 chrome.devtools 上运行的第三方 JavaScript 库。因此，您可以在开发机上的 hosts 文件中创建条目，将此网域映射到 localhost（即 127.0.0.1 chrome.devtools）。设置自定义域名映射和端口转发后，您将能够在 Android 设备上查看网站，网址为 chrome.devtools。

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

如需映射自定义网域，您必须在开发机器上运行代理服务器。代理服务器的示例包括 Charles、Squid 和 Fiddler。

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

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

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

在设备上配置代理设置

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

  1. 在 Android 设备上，依次前往设置 > Wi-Fi。

  2. 长按您连接到的网络的名称。

  3. 点按修改网络。

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

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

  6. 在 Proxy hostname（代理主机名）字段中，输入 localhost。

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

  8. 点按保存。

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

现在，您可以在 Android 设备上访问自定义域名，就像您在开发机器上访问一样。

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