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.


Log in to reply
 

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