How to toggle Device Mode on a popup window in Chrome?

Question

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!

Answer 1

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)