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

Kayce Basques

Twitter GitHub Glitch

Meggin Kearney

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

      

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

      

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

   

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

案例 2：为 Android 设备设置“通过 USB 转发”端口

1. 在开发机器和 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 查看该网站。

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

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

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

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

   注意 ：代理服务器和网络服务器必须在不同的端口上运行。

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

在设备上配置代理设置

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

1. 在 Android 设备上，依次转到设置 > WLAN。

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

   注意 ：代理设置按网络应用。

3. 点按修改网络。

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

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

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

7. 在 Proxy port（代理端口）字段中，输入您在上一部分为 device port 输入的端口号。

8. 点按保存。

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

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

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

提示 ：如需恢复正常浏览，请务必在与开发机器断开连接后还原 Android 设备上的代理设置。