微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

远程调试 chrome - 不打开 websocket 1 安装 depot_tools构建的先决条件2 检查 devtools-frontend 存储库3 构建 chrome devtools 前端4 启动 devtools-frontend http 服务器5 运行 2 个 chrome 实例并使用一个来调试另一个

如何解决远程调试 chrome - 不打开 websocket 1 安装 depot_tools构建的先决条件2 检查 devtools-frontend 存储库3 构建 chrome devtools 前端4 启动 devtools-frontend http 服务器5 运行 2 个 chrome 实例并使用一个来调试另一个

我通过 chromedriver 和 selenium 通过 python 无头运行 chrome。 我在 Mac 和 Linux 上都遇到了以下问题。

我按如下方式启动 chrome:

        if self.headless:
            options.headless = True
            options.add_argument("--headless")

        if self.debug_port:
            logging.info(f"Setting up remote debugging on port {self.debug_port}")
            options.add_argument(f"--remote-debugging-port={self.debug_port}")
            options.add_argument(f"--remote-debugging-address=0.0.0.0")

如果我从另一个带头的 chrome 实例连接到 http://localhost:9222,我可以看到会话列表并无缝连接到它。此时,我打开了一个窗口,其中包含远程会话和开发控制台的截屏视频。

这是一个成功的例子:

chrome devtools debugger connected to localhost

当我连接到 http://192.168.1.194:9222 时,我得到的会话列表很好,选择一个后,开发控制台会打开,但它不会启动到 ws://192.168.1.194 的 websocket 连接,因此截屏和远程调试功能不可用。

这是失败的例子:

chrome devtools debugger connected to 192.168.1.194

我有 captured har files and uploaded them here 如果你想看看

解决方法

使用以下步骤,我能够远程调试。但是,截屏功能不起作用。最终,这就是我所需要的,所以在我的情况下,这只是 50% 的解决方案。

因此,正如上面在评论中所指出的,阻止远程调试工作的是 Chrome 调试器链接到 https://chrome-devtools-frontend.appspot.com/..... 并为 websocket 参数传递值 ws://192.168.1.194。任何浏览器都会固有地阻止它,因为它是混合内容 - 即:https + ws

这里需要的是在 http 服务器上运行 chrome 开发工具前端 并将您的 chrome 实例定向到该服务器而不是 appspot 实例。

解决步骤

1 安装 depot_tools(构建的先决条件)

https://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/docs/html/depot_tools_tutorial.html#_setting_up

2 检查 devtools-frontend 存储库

https://github.com/ChromeDevTools/devtools-frontend/blob/master/docs/workflows.md#checking-out-source

3 构建 chrome devtools 前端

https://github.com/ChromeDevTools/devtools-frontend/blob/master/docs/workflows.md#build

4 启动 devtools-frontend http 服务器

https://github.com/ChromeDevTools/devtools-frontend/blob/master/docs/workflows.md#running-in-hosted-mode

5 运行 2 个 chrome 实例并使用一个来调试另一个

5.1 启动chrome headless的第一个实例

...启用远程调试。请参阅上面问题中的python方式或使用相同的参数从命令行执行

5.2 启动第二个chrome实例

...使用不同的用户数据目录 --user-data-dir=<some-path>

5.3 导航到 http://192.168.1.194:9222

使用第一个 Chrome 实例的 IP 地址和您选择的端口。

5.4 创建本地开发服务器的链接

Chrome 的第二个实例现在将向您显示调试第一个实例的每个打开选项卡的链接。但是,链接仍将转到 https://chrome-devtools-frontend.appspot.com/....。您需要复制 n 粘贴您想要的链接,并将主机名替换为您在步骤 4 中启动的 devtools 前端的主机名

瓦拉!!

如果您想知道如何让截屏视频正常工作,请在下方评论! ?

注意: 我还尝试在 devtools 前端使用 npm run server 命令,但由于某种原因该服务器根本无法工作 ¯\_(ツ)_/¯

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。