Inspecting the Vivaldi UI with DevTools

Pathduck

@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 with window.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 defaults Ctrl+Shift+I / F12 sadly no longer work.

Xium

Opened up a new window and ctrl shift J worked immediately, cheers.

shizam44

This post is deleted!

morpheus1710

This thread saved my life thank you.

RadekPilich

@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 your F2 key to open quick commands, then type toggle developer tools and then hit enter.

This works. What's described in the original post doesn't work. @luetage updating the original post would save others some time and frustration.

Pathduck

@RadekPilich All items described in the original post work. If they don't you're doing something wrong

Note that the vivaldi://inspect method on window.html is 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".

RadekPilich

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

luetage

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

sjudenim

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 enable Debugging for packed apps

quodroc

For whatever reason Ctrl + Shift + J still works even though F12 and Ctrl + Shift + I do not.

Edit: didn't notice this was already pointed out earlier in the thread, sorry for the noise.

arganto

How can I inspect (so be able to style/change) the (new/changed) styles from the on_click popups e.g. from Menu

or esp from the fav folders in fav bar

Pathduck

@arganto Hi - unfortunately these menus as well as the context menu are native Chromium UI and not Vivaldi UI and so cannot be styled.

Vivaldi will have to replace these menus with their own and that will be a lot of work and might never happen.

arganto

Oh. What a pity/sh... The new style with paddings, bold, ... is (esp. for long lists) not good. I don't like it and hoped I can re-style them.

But thanks for your answer.

Pathduck

@arganto Have you looked in Settings?

Must've been a dozen or so topics about this already

OsoPolar

@luetage said in Inspecting the Vivaldi UI with DevTools:

vivaldi://settings/

Hello Guys
I have read it about 4 times and even passed it through several AI engines.
Its clearly me and AI but i can make no sense of the instructions.
I end up with about 5 pages open none relating to what i am trying to identify

Please can somebody help my simple mind identify the 3 icons in the vertical bar see below
I can get two of them but the dev tools will NOT recognise the New Tab button it only highlights 2 of the 3 !!!

How do i get the dev tools to identify these

Pathduck

@OsoPolar said in Inspecting the Vivaldi UI with DevTools:

even passed it through several AI engines.

That's never going to work!
You need to use your human brain which will always be superior to any machine.

Anyway, it's not difficult.
Does this video help?
https://0x0.st/XP3D.mp4

I show the two methods that are fastest to open the inspector for window.html , then using the element picker to choose an element, finding its class name and then testing changes to that directly in the Sources tab.

OsoPolar

@Pathduck

See here not working for me

Pathduck

@OsoPolar

Case 1: You're clicking Inspect on window.html - this opens the UI inspector on the left. I don't know what OS you're on or why you have your windows tiled like that, but it opens.

It opens in the "Sources" tab, which probably is the last one you used.
The guide (and my video) clearly shows you're to use the Element Inspector:

The page elements are on the Elements tab. Devtools will open Elements when using the Element Inspector and choosing an element to inspect.

This is basic Devtools inspector stuff, so if your level is at that point, you need to learn to actually use the Devtools first before there's any point going further.
https://developer.chrome.com/docs/devtools
https://nira.com/chrome-developer-tools/

Case 2: You open Quick Commands and try to type "Toggle Developer Tools" while on the vivaldi://inspect page.

This is NOT what I showed - I opened a new tab with Start Page.
And the guide says to use any internal page. In my video I open a new tab, as it works also from the Start Page when using Quick Commands.
Please pay some attention before saying "doesn't work".

OsoPolar

@Pathduck hi apologies i have manged to get ti working .
The issue i was having and why it didnt work like you showed i had my custom css running.
This was (and still is blocking / wrapping my new tab icon but i know what they are called now.

So i need to work out how to get my custom css working correctly even several AI LLM cannot get it correct.

I been trying to get it working for week see here but at least i know how to find the names.
Sorry again it was a lot easier as you showed but me not removing the custom css was a error. CHeers for help.