Inspecting the Vivaldi UI with DevTools
-
To enable this feature you have to run Vivaldi with following command line:
--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-endIt doesn't matter much, but something I noticed a while back is that just appending
--debug-packed-apps --silent-debugger-extension-apiis enough.
--flag-switches-beginand--flag-switches-enddon't actually do anything, they're just informational brackets that vivaldi://about/ shows to indicate things set with vivaldi://flags. -
@Isildur Interestingly on osx you can even drop the
-extension-apipart at the end, no idea why, but it still works. -
Is it possible to use the React Dev Tools while inspecting Vivaldi's UI? I installed the React Dev Tools and they work fine on regular web pages, but I don't see the "React" tab when inspecting Vivaldi's UI itself.
-
@daniel15 I don't know, but probably not. Since it's an extension it tries to inspect the site, not the application. You should probably contact an extension developer about this to make sure.
-
Thank you for posting these instructions for everyone's benefit. I had found them using the old forum links, but it is good for everyone else.
-
Hey, so recently I've been having issues with this. Most of the time when I start the browser using these flags I still can't inspect the UI on a right-click. But every once in a while it does work. I can't figure out why, and it's started getting really annoying when I'm trying to mod stuff. Any ideas?
Win 10 x64 BTW.
-
@narsis Yeah, I'm having the same problems since 1.13 (when they changed the underlying UI code) -- and they didn't get fixed in 1.14. At least one other user I know, has these issues too. The browser tries to simulate the restart (or reload) and fails, sometimes freezing all tabs and controls. That's why I stopped using simulated restarts altogether for the time being. Instead I wrote a script that closes and opens Vivaldi (in inspect mode) automatically. Is a workaround but surprisingly fast.
-
@luetage I've found that just selecting all tabs and moving them into a new window works, as that loads a new instance of the browser.html
-
I rewrote the top entry to show all ways of opening devtools/inspecting Vivaldi’s UI. I searched the forums for additional options, but didn’t come up with anything. I can dimly recall that there was at least one other way to open up a fresh tab with the background page listening on a port. Somebody remembers this?
-
- open settings in a tab & press the inspect shortcut
-
@potmeklecbohdan That works without the flag?
-
@luetage Yes—I’ve tried it with a clean user data dir. The only condition is that the settings are in a tab.
-
@potmeklecbohdan Damn, nice find. That’s probably the easiest way now.
-
@luetage said in Inspecting Vivaldi's UI with devtools:
Damn, nice find
Actually not found by me, IIRC. But it’s been quite a long time ago, so I don’t know who’s pointed me to it…
Oh, & you got me wrong—not by the context menu, but by the keyboard (
F12orCtl-Sft-Iby default). -
@potmeklecbohdan Ah, I understand. Tested it just now, settings seems to be the only page this works on.
-
I was thinking this thread, or a summarized guide from it, would be good to have pinned in this category. I think the thread itself is fine, but if the mods/folks think otherwise I could give writing a summary a go, but I'm not certain that's necessary.
The topic, however, is such a crucial task when it comes to modifying Vivaldi, that I think it would benefit the community to have it pinned -- both for newcomers as well as those searching for it to share with newcomers.
I post from my phone frequently, which likes to change "the" to "three". If you see three or similar, I probably meant "the". I use swipe, so typos can be totally unrelated words to what I intended. Knowing this should help you read through my typos.
-
@BoneTone In addition to your excellent suggestion [& though i'm replying to you coz it was your idea, the following question is addressed to anyone], regarding the OP:
@luetage said in Inspecting Vivaldi's UI with devtools:
Open devtools without browser restart: Visit vivaldi://inspect/#apps and click “inspect” below the browser.html entry at top.
Over the last few years i've become slightly less-bad at using Inspect from right-click to delve into ordinary websites to make various aesthetic mods via CSS. However to date wrt actual V UI mods i have had no idea at all & thus have merely relied on the hard work of others in the forum from whom i've borrowed various clever UI mods.
The method i quoted above seems potentially interesting to me, but once the little windowlet opens, it's not apparent to me how to use it for inspecting parts of the UI. If someone has already explained this in another thread, could you pls link it to me so i can read it & try to learn?
-
@Steffie I'm not sure about the part you quoted, what I did was set the relevant flag in Vivaldi, then to inspect I just secondary-click on whatever I want and choose inspect from the context menu. Additionally, in the dev tools on the upper left there's a mouse pointer icon and clicking that will allow you to click on whatever you want to inspect Werth the normal primary mouse button click. Once the flag is set, inspecting is always available.
-
@BoneTone Oh wow, fabbo -- ta muchly! When i read the method to which you [i presume] refer...
@luetage said in Inspecting Vivaldi's UI with devtools:
Enable “Debugging for packed apps” in vivaldi://flags to switch the flag permanently.
...i failed to grasp its significance, & so tried instead that other method about which i posted. But "your" method is much better, cos having it permanently available in the right-click context menu is far neater & consistent.
Also, yes i entirely failed to notice that upper rhs arrow icon... but it no longer matters now.
Yippee, now i should be able to reduce my V to a smouldering broken ruin in no time flat.
-
@BoneTone I asked about pinning it in 2017; the original post has been bookmarked 15 times since then. Which is quite the amount considering few forum users know how to internally bookmark posts.
@Steffie I’m running it with the permanent flag myself, since I mod regularly. But if you just wanna quickly look something up from time to time, visiting settings and opening devtools is probably the most convenient way.
