Inspecting the Vivaldi UI with DevTools

[A Former User]

@dude99 They do… under certain circumstances (see the 1st post )

[dude99]

@potmeklecbohdan You mean this ONE?

Open vivaldi://settings/ in a tab and load devtools with a keyboard shortcut

OK. it works, BUT that's not a direct shortcut key, I think it's even more troublesome than webpanel > Inspect method... LOL

[luetage]

@dude99 Nobody ever said that it’s 1 shortcut. But with optimum setup it’s 2 keyboard keys pressed separately. First open settings or any other relevant page, then trigger devtools. That’s faster than opening a webpanel, looking for exact entry and clicking. But yeah, it’s of course a matter of preference, you are free to do what you like.

[dude99]

@luetage said in Inspecting the Vivaldi UI with DevTools:

First open settings or any other relevant page

with keyboard shortcut? can't find any default shortcut for that, are you talking about nickname with bookmark?

[luetage]

@dude99 You can search keyboard shortcuts by opening settings and inputting the shortcut name. When you input “Settings”, the shortcut for it shows up and can be set or edited. It’s listed under Window. It’s the 8th shortcut overall.

[dude99]

@luetage You mean the default Settings Ctrl+12 shortcut? It open the settings in new window, but when I hit Shift+Ctrl+i nothing happen...

[luetage]

@dude99 You have to open settings in a tab, as explained in OP ^^

[dude99]

@luetage so the shortcut you suggested doesn't work, how u did it exactly? nevermind, there's another setting that force open settings page in tab.

Now, it works. Thanks a lot.

[luetage]

With the new chained commands feature introduced in snapshot today, it’s possible to open DevTools for the UI with a simple keyboard shortcut. This is probably the most straightforward way right now.

Recipe
Name: Inspect UI

1. Open Link in New Tab
   Parameter: vivaldi://experiments/
2. Delay
   Paramenter: 50
3. Developer Tools
4. Close Tab

After creating the command chain in vivaldi://settings/qc/, the new chain should be available in keyboard and mouse settings and from quick commands directly.

[dude99]

Step-by-step visual guide from other post, insert here for everyone easy access:

I strongly recommend u learn to use the devtool to inspect the browser GUI, cuz u can do a lot of things with it.

1. Create this command chains.

   

2. Open a new window, then use above CC to summon the devtool, then select the element container inside the addressbar & made all the changes you wanted. (Ctrl+Z to UNDO if you mess up, all changes are temporary & will be reset after closing window)

   

3. Copy all the changes to your .css file when u r satisfied with the final result.

   

[A Former User]

fyi, got this notice from localhost:9222 today:

Inspectable pages

WARNING: This page is deprecated and will be removed by m96. Please use chrome://inspect instead. Use crbug.com/1232509 for comments, questions and feedback.

might be worth an update to the OP.

[guigirl]

An accidentally-discovered side-benefit from using --debug-packed-apps:

https://forum.vivaldi.net/topic/73683/vivaldi-5-2-rc-1-vivaldi-desktop-browser-snapshot-2623-16-18/33

[Mike5]

@luetage Thanks for trying to explain... can not activate anything in vivaldi://inspect/#apps

[luetage]

@Mike5 said in Inspecting the Vivaldi UI with DevTools:

vivaldi://inspect/#apps

Hmm, still appears to work for me. But you don’t have to do it like that. Open vivaldi://settings/ in a tab (not extra window) and then open devtools with quick commands, shortcut, or through menu. This will open internal devtools.

[Mike5]

@luetage Wow, thanks for quick reply! Yes, DevTools open, vivaldi://inspect/#apps the same, can not activate browser.html. In DevTools where can i check if it is the internal Devtools?

[luetage]

@Mike5 Click on the mouse cursor on left top to select an element on page, then hover something in the UI, for example a tab or the panel.

[Mike5]

@luetage No, neither if Devtools is in seperate window or docked, i can not point to an ui element, just switch to it. The culprit might be i can not activate browser.html in vivaldi://inspect/#apps. Why could that be, any flags i should add?

[luetage]

@Mike5 If you can dock the devtools, you haven’t opened the internal devtools. Internal devtools can’t be docked, they always open in a window. How did you open devtools after visiting the settings page?

[Mike5]

@luetage I can not open Devtools when in Settings page. Have to switch to some web page.
My flags:
Vivaldi.exe" --disk-cache-dir="C:\ALL_OS\VIVALDI" --disk-cache-size=2000000000 --num-raster-threads=4 --enable-accelerated-2d-canvas --disable-crash-reporter --cipher-suite-blacklist="0x002f,0x009c,0xc013,0xc014,0x0035" --enable-features="BlockInsecurePrivateNetworkRequestsForNavigations,EncryptedClientHello" --disable-features="AdInterestGroupAPI,CrashReporting,EnableStructuredMetrics,InterestGroupStorage,MediaDrmPreprovisioning,Reporting,SafeBrowsingBetterTelemetryAcrossReports,RecordMediaEngagementScores,RecordWebAudioEngagement,WebUSB,WebXR,MediaEngagementBypassAutoplayPolicies"

[luetage]

@Mike5 You can’t open devtools for the UI from some webpage, it doesn’t work like that. This is not dependent on flags. Let’s try again: Open vivaldi://experiments, hit your F2 key to open quick commands, then type toggle developer tools and then hit enter.