Simulate mobile device with undocked Developer Tools?
-
I'm supposed to make a live presentation of a website launched on a mobile device and for this purpose, I want to use the Device Mode in DevTools. I want to use a secondary screen for the presentation and ideally, it should show the website in portrait mode (with simulated touch), but I don't want anything else to be displayed on that screen.
I tried undocking the DevTools, to leave them on the primary screen, but as soon as I did that, the Device Mode was switched off (despite its button claiming otherwise). So far, the best I could come up with was to put the DevTools on the side, shrink them as much as I could and switch to the "Memory" tab (since in such config I can make it look almost "empty").
I wonder if it's possible to hide the DevTools with custom CSS? I tried fiddling with the
.devtools-container
for a bit, but it was affecting the whole page. I also tried extending the browser's window across both screens (so that the part with the DevTools remained "hidden" on the 1st screen), but this way I couldn't switch to full screen and even with the UI hidden, the top bar of the browser remained visible, which didn't look good.Is there any way to simulate mobile website in full screen without all that unnecessary stuff but with touch support emulated?
-
Unfortunately, I don't think it's possible.
There is a bug in the current snapshots where switching to device mode in one tab will actually enable touch events across all other tabs, and even the browser itself.
You could try and turn that bug into a feature, I guess?
-
Ppafflick moved this topic from Browsers on