Search code examples
google-chromegoogle-chrome-devtools

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

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!

Solution

  • 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)