How to inspect page DOM, not browser's?
Hi guys, I'm trying to use DOM inspector (ctrl+shift+i), but it shows me DOM of Vivaldi interface, not the page itself. While showing Vivaldi DOM is very nice (if it's a bug, I'd love this to stay as an option), inspecting page DOM is needed as well. Is there some option which I've missed to switch to the page DOM, or is it a bug? [b]more details[/b] Let's consider this (new topic) page for example. I press ctrl+shift+i, see browser DOM in the "Elements" tab. In "Sources" tab, there are "mpognobbkildjkofajifpdfhcoklimli" root (god, why such a strange name?) with browser.html, bundle.js and "style" folder inside and "(no domain)" root with "(index)" and multiple "extensions::[...]" items inside ([...] = extension name, I guess). Nothing like vivaldi.com. It seems connected with another issue. The inspector is shown in another window (I'd like to get it docked to the main window) and hence it probably doesn't know about the tab I'd like to inspect. Also I thought that context menu of the ~content~ element may contain something helpful to get the page DOM, but menus of both [i]webview[/i] and [i]object[/i] elements in the subtree below (hovering each is visualized with the whole page selected hence I recognize it as the "page-container DOM") don't show any items like "get DOM of the page" or alike. [code] <webview id="711" partition="persist:storage" tab_id="711" tabindex="-1" src="https://vivaldi.net/forum/all/topic/create">#shadow-root (open)</webview>[/code] Best regards, Yakov.
It is a known bug to show complete UI in Developer Tools. it is fixed in internal version at this time, next public Snapshot will fix it.
In page you can use context menu Inspect… to get DOM of page.
What is misleading: the context menu does open inspector in the page contenxt; but it also shows a hint "Ctrl+Shift+I" which works as explained above (shows "general" context). But if this is fixed as well, let's just wait for the next release.
By the way, nice drag&drop of tabs in dev tools