search

sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
864 stars 105 forks source link

Inspector: Add visual hover feedback in mobile/responsive device mode #542

Closed henrikvilhelmberglund closed 1 year ago

henrikvilhelmberglund commented 1 year ago

Describe the problem

When you inspect a page and enable the mobile/responsive device mode with the button in the top left of devtools there is no visual hover feedback. I guess this makes sense because of the touch mode and maybe there is no way to get this data because it's emulating a touch system instead of a mouse with a cursor.

Describe the proposed solution

I would like to see visual hover feedback added in mobile/responsive device mode (if it's actually possible).

Alternatives considered

A nice workaround I found is to create a new device (dimensions - edit - add custom device) and make a new device with the dimensions you want and setting Mobile next to the user agent field to Mobile (no touch).

This disables touch so you can't swipe but the inspector hover gives visual hover feedback again (and you can still scroll with the mouse).

Importance

would make my life easier

dominikg commented 1 year ago

this is a tough one, without keyboard and mouse events and no :hover styles, the logic of svelte-inspecttor doesn't really work. While theoretically possible (track pointer position via events, somehow map to element under pointer, change that element with js), this is an edge case and the workaround you described should be used for the time being.

If someone finds an easy way to identify the element under pointer in mobie mode, i'm all ears.

henrikvilhelmberglund commented 1 year ago

No problem!

An even better way (perhaps) is to set the device to Responsive and click the three dots (settings) to the right and then "Add device type". That way you get a dropdown where you can easily change from Mobile to Desktop.

I think this works good enough.