Inspecting the Vivaldi UI with DevTools
-
@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?
-
@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" -
@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 yourF2
key to open quick commands, then typetoggle developer tools
and then hitenter
. -
@luetage Yes Sir! Finally i can access the UI DevTools. What do NOT work to trigger UI DevTools:
Devtools from pages like Settings, Flags or any other "normal" internal page.
It DOES WORK on vivaldi://experiments and call DevTools via shortcut or quick commands.
Thank You very much @luetage, i can now dig deeper into modifying my UI layout.
What's confusing still, i can not activate anything on vivaldi://inspect/#appsThe Vivaldi Browser Community is extraordinary!
-
How do I modify the styles for tab cycler, including any icons within tab cycler and the tab cycler window itself ?
How do I modify the menu items styles within the menu icon found in the UI of the Vivaldi window which can either be the Vivaldi icon or the menu icon whatever you may have it set too in the top left hand corner of any Vivaldi window ?
-
- You can’t modify menus, they are styled by your operating system.
- The menu icon is just an SVG, you can replace its path with CSS.
- The icons in the tab cycler are website favicons, they are not a steady target. The only thing you could do is write a userscript for websites you want to change the favicon for, but I don’t know whether this will translate to the favicons in the tabswitcher. In any case this is off‐topic, because webpage manipulation is not part of Vivaldi modding. The tab cycler itself can be inspected, just look up the selectors you need.
-
I can't inspect the tab cycler as it's triggered by keyboard shortcuts; therefore what selectors must I look for within the css file ?
-
@Sparrows You can. Open the devtools for the UI, focus the Vivaldi window again, click
ctrl-tab
and keepctrl
pressed. Then click the arrow icon top left in the devtools window and click the element in the cycler you want to inspect. This will highlight the HTML in the devtools window where you can look up everything. -
@luetage said in Inspecting the Vivaldi UI with DevTools:
@Sparrows You can. Open the devtools for the UI, focus the Vivaldi window again, click
ctrl-tab
and keepctrl
pressed. Then click the arrow icon top left in the devtools window and click the element in the cycler you want to inspect. This will highlight the HTML in the devtools window where you can look up everything.This isn't working as you described. Tab Cycler opens with CTRL+TAB; while holding down CTRL while clicking the arrow in the dev tools doesn't inspect the elements for the UI in Vivaldi ?
-
@Sparrows Works for me. After clicking the arrow icon you need to click on the cycler. Anyway, it’s best to leave the cycler alone.
-
I don't have in vivaldi://inspect/#apps/ such a line with browser.html , where I can click Inspect
There is only chrome-extension://mpognobbkildjkofajifpdfhcoklimli/main.html -
I accidentally took off this jackdaw in
vivaldi://experiments/.
It is necessary to clarify this for beginners. If 3 daw is enabled, then they will not see browser.html -
@sphera
well, is highly experimental inside the experiments page already and no-one ever suggested to fiddle with it (which is a red flag)//EDIT: Now is totally the opposite You are not supposed to disable portals anymore from experiments, if present (the setting shouldn't be present anymore).
-
Nothing is working, why isn't this easier, it used to just work T_T
-
@Xium Create a command chain for it and define a keyboard shortcut. The instructions in the first post still work.
-
@luetage It didn't for me T_T
-
@Xium Instead of saying over and over "don't work (cry)" try to explain what you are trying to do and how you are doing it. No-one can help you unless you get better at explaining.
Which part of the instruction are you following?
At what point does it "not work"?
Where does it "not work"?@luetage Might be an idea to edit your first post and replace
browser.html
withwindow.html
where it occurs. Also maybe an idea to not say "Menu > Tools > Developer Tools" as AFAIK the default menus no longer have these (unless edited)?The default hotkey is
Ctrl+Shift+J
as the other defaultsCtrl+Shift+I / F12
sadly no longer work. -
Opened up a new window and ctrl shift J worked immediately, cheers.
-
This post is deleted! -
This thread saved my life thank you.