使用 Chrome DevTools 检查远程目标时如何设置设备类型(非移动)?

How to set the device type (to not mobile) when inspecting a remote target with Chrome DevTools?

提问人:cYrus 提问时间:4/24/2022 更新时间:5/18/2022 访问量:1576

问:

因此,在检查远程实例时,通常存在于任何常规 DevTools 实例中的设备工具栏似乎都丢失了。

device toolbar

在这种情况下,设备类型设置为“移动”,鼠标指针设置为圆圈,以表示这一点。

以下是重现此内容的方法:

  1. 启动一个新的无头实例,例如:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --headless https://example.com
    
  2. 使用另一个 Chrome 实例,导航到并检查远程标签页。chrome://inspect

  3. 如您所见,没有设备工具栏。

devtools

我还尝试发送一些 Chrome DevTools 协议命令,例如:

但无济于事,发生了一些事情,但行为看起来很糟糕......我怀疑这与 DevTools 前端有关,而不是与检查的 Chrome 实例有关。

您知道我该如何解决这个问题吗?我的最终目标是使用桌面设备类型手动与远程无头实例进行交互。

谷歌浏览器 google-chrome-devtools 浏览器远程调试

评论

2赞 Juraj 5/20/2022
我复制了这个问题。看起来远程调试适用于移动设备(开发工具在本地不可用)。它也应该适用于无头,但远程开发工具甚至不想为我打开无头。对于不是无头的,它会打开。

答:

1赞 Matthew M. 5/18/2022 #1

如果我理解正确的话,您希望使用桌面设备与远程实例进行手动交互。您应该只需单击 devtools 窗口左上角的设备图标即可关闭移动设备。

DevTools Device Toggle

评论

1赞 cYrus 5/18/2022
从第二个屏幕截图中可以看出,没有工具栏可以执行此操作。
1赞 cYrus 5/18/2022
单击该图标只会关闭页面预览。
0赞 djangofan 5/20/2022
我认为这个答案可能是正确的。如果您的 Chrome 没有问题,请尝试安装“Chromium 浏览器”,并告诉我们是否存在相同的行为。
1赞 cYrus 5/20/2022
你试过OP中的场景吗?
2赞 Juraj 5/21/2022
我在 Windows 上复制了这个问题。我看你不明白这个问题