Skip to content

Instantly share code, notes, and snippets.

@bseib
Last active May 15, 2024 04:59
Show Gist options
  • Save bseib/be0718842f4c7b31074300f7368e3694 to your computer and use it in GitHub Desktop.
Save bseib/be0718842f4c7b31074300f7368e3694 to your computer and use it in GitHub Desktop.
In DevTools, "device mode" shouldn't be centered

In DevTools, "device mode" shouldn't be centered

This general centering issue was filed here: https://bugs.chromium.org/p/chromium/issues/detail?id=598805

For dragging 1px width change: https://bugs.chromium.org/p/chromium/issues/detail?id=598818 See the section below, "Resizing, one pixel at a time".

For the missing resize bars: https://bugs.chromium.org/p/chromium/issues/detail?id=598822 See the section below, "Resize bar is not always available".

For the missing rotate button: https://bugs.chromium.org/p/chromium/issues/detail?id=598829 See the section below, "Rotate not always available"

For the missing "hover" behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=600180 See the added comment below.

@bseib
Copy link
Author

bseib commented Apr 4, 2016

In dev tools v48, using device mode, you can still hover over DOM elements and see the CSS :hover effects:

dev-tools-hover-chrome-48_1

In dev tools v49, all device modes assume touch screen, giving you the circular "touchscreen" pointer, and not showing any "hover" effects:
dev-tools-hover-chrome-49_1

@bseib
Copy link
Author

bseib commented Apr 4, 2016

Turns out that you can toggle the hover/touchscreen behavior, under the "overflow menu" > user agent type > (desktop|touch|mobile).

When you select anything except the default (mobile), then there is visual feedback telling you the mode you are in. This visual feedback guides you where to look for changing that mode. For example, "desktop" is shown in the upper right:

device-mode-desktop

And even if you change the pixel density, this info is reflected in the same area, near the overflow menu.:

device-mode-desktop-dpr2

And selecting "touch", shows similar mode feedback:

device-mode-touch

But mobile, being default, does not provide any indication that's I'm in any particular mode, or where/how I might change it:

device-mode-mobile

@mishoo
Copy link

mishoo commented May 15, 2024

Has this issue been addressed? It bothers me enough that I googled for it, and landed here (and here), but it's not clear from navigating the sea of linked duplicate issues whether a solution exists or not.

Firefox does have a left-align option in devtools settings, but I can't find it in Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment