Inspecting the Vivaldi UI with DevTools
-
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-taband keepctrlpressed. 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-taband keepctrlpressed. 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.htmlwithwindow.htmlwhere 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+Jas the other defaultsCtrl+Shift+I / F12sadly 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.
-
@luetage said in Inspecting the Vivaldi UI with DevTools:
@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 yourF2key to open quick commands, then typetoggle developer toolsand then hitenter.This works. What's described in the original post doesn't work. @luetage updating the original post would save others some time and frustration.
-
@RadekPilich All items described in the original post work. If they don't you're doing something wrong
Note that the
vivaldi://inspectmethod onwindow.htmlis the only one guaranteed to work - the other methods are hacks/shortcuts that depend on how Vivaldi's internal pages handle dev.tools. These methods might change or break at an update.What I usually do these days is open Start Page, press F2 and type 'dev' to get "Toggle Developer Tools".
🎻Volunteer helper · Forum moderator · Sopranos tester 🛠️Troubleshooting 🐛Report a bug 📜Markdown help
🦆"With a rubber duck, one's never alone" -Douglas Adams🦆 -
@Pathduck I should have been more clear - the only method that launches the UI DevTools correctly for me is the F2 method. Other methods dont' work, launch page DevTools or even crash Vivaldi.
-
@RadekPilich Write down exactly what you do. All the methods have been tested and should work. I do suggest the command chain and binding it to a keyboard shortcut; it’s the simplest way for quick access of devtools for the UI.
-
Been out of the loop and I see the ability to inspect using the flag has been all but removed in the latest snapshot.
However, the flag is still available if you enable
Temporarily unexpire M120 flags.Then enableDebugging for packed apps -
For whatever reason
Ctrl + Shift + Jstill works even thoughF12andCtrl + Shift + Ido not.Edit: didn't notice this was already pointed out earlier in the thread, sorry for the noise.
