如何在Chrome浏览器的弹出窗口中切换设备模式？ [英] How to toggle Device Mode on a popup window in Chrome?

问题描述

我有一个网络应用程序，并在新的弹出窗口中打开聊天。通常，在Chrome中，我可以按F12并单击智能手机的图标进行切换。但在弹出窗口中，此图标不显示。这对我来说很重要，因为我需要限制弹出窗口的连接，以模拟用户从聊天断开。

谢谢！

解决方案

目前似乎不可能。我已为您打开机票。同时你有几个选项：

• 在常规窗口中打开弹出窗口（复制粘贴网址或修改窗口.open 调用打开一个新选项卡而不是单独的窗口），
  
• 创建一个使用 debugger API 将 emulateNetworkConditions 消息发送到您的弹出窗口
  
• 或尝试黑客入侵DevTools，如下所示：
  
  
  
  • 打开DevTools（ A ）为您的弹出窗口
  在DevTools窗口中，并使用DevTools控制台中的键盘快捷键（F12 / alt + cmd + J）
  
  • 为该窗口打开另一个DevTools（ B B 调用 WebInspector.overridesSupport.setEmulationEnabled（true）（以启用仿真），然后 WebInspector.overridesSupport.settings.networkConditions .set（{吞吐量：1.5 * 1024，延迟：40}）; （启用网络调节）
    

I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.

Thanks!

解决方案

It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:

• open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
• create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
• or try hacking DevTools like so:
  • open DevTools (A) for your popup
  • focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
  • in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)

这篇关于如何在Chrome浏览器的弹出窗口中切换设备模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！