Inspecting the Vivaldi UI with DevTools

luetage

Developer Tools allow us to inspect Vivaldi’s user interface and debug our modifications. Loading devtools the usual way (keyboard shortcuts, inspect from menu, &c.) won’t necessarily give us access to the interface, however. In the following section we want to look at different ways how to achieve this.

Loading DevTools

In the past we were able to add a command line flag to the executable, enabling debugging. This extendend all right‐click menus in the UI and allowed us to inspect specific elements directly. Chrome version 89 deprecated this option, therefore we have to resort to alternative methods.

Open vivaldi://inspect/#apps/ and click “inspect” beneath the first line (Vivaldi browser.html).
Open vivaldi://settings/ in a tab and load devtools with a keyboard shortcut, quick commands, or menu entry (e.g. Main Menu — Tools — Developer Tools).
Open vivaldi://experiments/, load devtools.
Open vivaldi://mail/, load devtools.
Enable “Show Introduction” for private windows in vivaldi://settings/privacy/. Open a private window, load devtools.
Start Vivaldi with the command line flag --remote-debugging-port=9222. Open another browser (the stable/snapshot version of Vivaldi for instance) and visit http://localhost:9222/. Select the line containing browser.html to inspect the user interface.

Devtools will always load in a new window; we are not able to attach them to the current window. Depending on your setup and preferences, you can create bookmarks for these sites with optional nicknames, dedicated menu entries for both the sites and the different developer tools commands (Element Inspector and Console) and custom keyboard shortcuts. This assures devtools for the UI are only ever a few clicks, or keystrokes, away.

Using DevTools

A short introduction in 2 examples.

Element Inspector

Screenshot from 2020-11-11 19-26-01.png

The element inspector allows us to look up selectors for the elements we intend to modify. Let’s change the font color of the active tab.

Open devtools and click the element picker button (mouse pointer) on top left. It turns blue.
Hover the active tab in the Vivaldi window and move around until you see the span element with the .title class.
Click to select. The element is being highlighted in the “Elements” tab, which represents the page source of the user interface.
A second section inside the tab contains the “Styles” tab either at the side or beneath. In the source we can find the selectors, the style shows the CSS acting on the selected element. Scroll down until you find the command that changes the color of the active tab.
Click on var(--colorAccentFg) (this is an example, the color could be different in your theme), press backspace, input red and press enter. This changes the font color, but only temporary (until reload).
Should you have the experiment for using CSS modifications enabled in vivaldi://experiments/, you can both access and edit your modification files in the developer tools. Click on the “Sources” tab and in the sidebar expand vivaldi-data and then css-mods. Click on your mod file, the contents will be shown right next to it. Since we know how Vivaldi changes the color of the active tab, we can use the same code in our file to overwrite Vivaldi’s instructions. Change the color to green this time and notice how the change is immediately visible.
This is a temporary modification too. However, we can make our edit permanent by right‐clicking and selecting “Save as...”. Choose the location of the mod file to overwrite, or save the edit as backup.

Reloading the user interface

The standard way of performing edits is opening our mod file in a proper text editor, editing, saving and reloading the UI. Here a few options to load the changes:

Exit Vivaldi and open it again.
Open a new browser window.
Select all tabs and move them to a new window. This is available as a menu entry when right‐clicking a tab and has the advantage of keeping sites and media playback active.
Restart Vivaldi. The URL vivaldi://restart/ will restart Vivaldi when it is being opened in the current tab. We can either enter the address directly in the address field, or use a bookmark. One nifty option is to save the address, assign a nickname to it (e.g. re) and load it with quick commands. shift‐/alt-enter will open in current tab, when bookmarks are set to open in a new tab by default and vice versa; this is dependent on our search, bookmarks and quick commands settings.

All the actions load the browser.html file anew, which in turn loads our modification files.

Console

Let’s write a “Hello, World!” example script for testing our Javascript setup as described in Modding Vivaldi.

Open the javascript modification file in a text editor.

Copy and paste following code and save.

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        console.log('Hello, World!');
    }
    else {
        setTimeout(wait, 300);
    }
}, 300)

Reload the user interface and load developer tools.
Click the “Console” tab, our message should be visible.
Now we introduce an error. Delete the first line of the script and reload UI.
Open devtools and switch to the console. Vivaldi detects the error at line 8, where the closing bracket is located. We deleted the opening bracket, so this is expected. Console logs are one way to test the functionality of our mods and find errors—use them to your advantage.

I hope these instructions have been helpful. For further questions post a reply; we have a healthy community willing to help out.

luetage

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

Gwen-Dragon

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

Gwen-Dragon

Forgot to say: I use the Snapshot 1.10.

luetage

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

Gwen-Dragon

@luetage Korrekt!

Isildur

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.

luetage

@Isildur Interestingly on osx you can even drop the -extension-api part at the end, no idea why, but it still works.

daniel15

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.

luetage

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

sethjbr

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

Narsis

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.

Gwen-Dragon

@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

luetage

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

LonM

@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

luetage

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?

potmeklecbohdan

open settings in a tab & press the inspect shortcut

luetage

@potmeklecbohdan That works without the flag?

potmeklecbohdan

@luetage Yes—I’ve tried it with a clean user data dir. The only condition is that the settings are in a tab.

luetage

@potmeklecbohdan Damn, nice find. That’s probably the easiest way now.