DevTools overlap the page

[howbizarre]

howbizarre last edited by

From time to time, the DevTools begin to overlap the page. It happens most often when my local (dev) server with the HMR (Hot Module Reload) reloads the app I'm developing, but it also happens while browsing sites.

This is annoying, especially when I use the hide and show hotkey Ctrl + Shift + I. Please, add F12 support if possible.

[burnout426]

burnout426 Volunteer @howbizarre last edited by

@howbizarre said in DevTools overlap the page:

Please, add F12 support if possible.

Goto the URL opera://settings/keyboardShortcuts and add F12 to the "Developer tools" command.

[burnout426]

burnout426 Volunteer last edited by

Does it happen in other Chromium browsers too? It might a be an underlying Chromium issue. I can't seem to reproduce it in quick testing though.

I assume you know you can have the tools open in their own window as a workaround.

[howbizarre]

howbizarre @burnout426 last edited by

@burnout426 No, everything works fine on Chrome and Brave. I use Opera One(version: 109.0.5097.68).

[burnout426]

burnout426 Volunteer @howbizarre last edited by

@howbizarre OK.

Opera 110 just came out. You can test if there's any difference in it.

[howbizarre]

howbizarre @burnout426 last edited by

@burnout426 Cool... Now it works. Мuch better

[howbizarre]

howbizarre @burnout426 last edited by

@burnout426 I made a capture with v110 https://youtu.be/cvqyewgdrGU - same problem...

[burnout426]

burnout426 Volunteer @howbizarre last edited by

@howbizarre Ah, yes. I can also reproduce now following the directions in the video, and only in Opera.

Please file a bug at https://opera.atlassian.net/servicedesk/customer/portal/9/group/11/create/6 (including link to the video) and post the bug number here.

[howbizarre]

howbizarre @burnout426 last edited by

@burnout426 I wrote one this morning - the bug number is: BS-92008

[ivanmca]

ivanmca @burnout426 last edited by

@burnout426 @howbizarre I have this issue as well.

If it helps, it's because Opera is reporting the wrong viewport width/height on initial page load with dev tools open. It's reporting the full size of the window rather than minus the dev tools. So if you follow links with dev tools open, the next page you load will be wrong.

If you add this to a page, you can see what it's doing:

function logViewportSize() {
  console.log('Width:', window.innerWidth);
  console.log('Height:', window.innerHeight);
}
logViewportSize();
window.addEventListener('resize', logViewportSize);

It's only on initial load of a new page. Any resizing, either of the window or dev tools, it will then report the correct width. Initial opening of dev tools also corrects the viewport numbers.