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

Kayce Basques
Kayce Basques
X GitHub
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

您可以使用端口转发来：

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

在 情况 2 中，端口转发通过 Android 设备上监听的 TCP 端口进行，该端口映射到开发机器上的 TCP 端口。端口之间的流量通过 Android 设备和开发机器之间的 USB 连接传输，因此连接不依赖于网络配置。

此外，如果您的 Web 服务器使用自定义网域，您可以设置 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. 返回设备 后，您会看到一个新的远程目标。点击要调试的标签页旁边的检查 。

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

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

    处于设备模式的 DevTools。

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

情况 2：通过 USB 为 Android 设备设置端口转发

  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 设备上查看开发机器上使用自定义网域的 Web 服务器中的内容。

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

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

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

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

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

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

在设备上配置代理设置

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

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

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

  3. 点按修改网络 。

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

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

  6. 对于代理主机名 字段，请输入 localhost。

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

  8. 点按保存 。

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

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

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