Inspecting Vivaldi's UI with devtools



  • Instructions on how to do this were previously available in the original modding thread. The post didn't survive the transition to the new forum though and is locked nowadays. Because we have many new tinkerers, who probably have never seen the topic, I thought I repost this here.

    Why is inspecting with devtools useful? Simply because you can right click any element in the UI to look up its class/id and properties.


    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-end

    On Mac you can open a terminal and startup Vivaldi with the command
    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api


    This makes live edits possible, and likewise you are able to simulate browser restarts to test changes you made to your custom.css file.



  • I think you still need remote debug to inspect Speed Dial.



  • What do you mean? I don't quite follow.


  • Moderator

    @liyin said in Inspecting Vivaldi's UI with devtools:

    I think you still need remote debug to inspect Speed Dial.

    No! Starting Vivaldi with parameters --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end is enough.



  • When I used the remote debug switch I could see a Inspect menu on the Speed Dial, I don't see it with the above.

    I am able to start Developer Tools and move between elements on webpages, but how do you do it with the Speed Dial?

    0_1494341895838_1.png


  • Moderator

    Forgot to say: I use the Snapshot 1.10.



  • @liyin Oh, now I get it.
    Just right click and inspect, the Speed Dial is part of Vivaldi's UI and can be accessed like all the other parts.


  • Moderator

    @luetage Korrekt! 😉



  • If you have an instance of Vivaldi running without the switches even if you start another instance with the switches it seems you are only starting another window from the first instance.

    You need to close Vivaldi and start form the shortcut with the switches to see the Inspect menu in Speed Dial.



  • 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-end

    It doesn't matter much, but something I noticed a while back is that just appending

    --debug-packed-apps --silent-debugger-extension-api
    

    is enough. --flag-switches-begin and --flag-switches-end don'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-api part 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.



  • @luetage

    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.


  • Moderator

    @narsis vivaldi.exe --debug-packed-apps --silent-debugger-extension-api works on my 1.14.1030.3 and 1.13.1008.32 x64 | Win 10 x64



  • @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


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.