search

MicrosoftEdge / DevTools

Feedback and discussions about Microsoft Edge Developer Tools
MIT License
156 stars 52 forks source link

Simulate browser's URL bar offset in device emulation mode #2

Open sinedied opened 2 years ago

sinedied commented 2 years ago

Toggling the device emulation mode is great for proof-testing and debugging your mobile website designs, but it's currently missing an essential piece that still makes testing on a real device a critical part of the dev workflow: there's no browser UI included in the screen simulation, especially the toolbar part containing the current URL that appears at the top (or bottom) of the window.

As this toolbar usually alter the window dimensions in the final device, it makes it easy to overlook issues that may only appear on real devices.

This is particularly the case with dual screen emulation for the Surface Duo, as on the real device both screen windows may not have the same size depending of the orientation because of the browser UI, whereas on the simulator both windows will always have the same size:

image

For example, when loading the same website on a real Surface Duo, the top window will have its vertical size reduced because of the URL toolbar.

captainbrosset commented 2 years ago

Great point. Indeed the device emulation mode is really just a way to resize the window (and simulate touch events), and is very far from what a real device would do. I know @zoherghadyali was thinking about this recently and might have some good notes to share.