Inspecting the Vivaldi UI with DevTools
-
@hlehyaric Visit the link and click inspect, that’s also mentioned in this guide. It opens devtools for UI. What is missing is of course simulating a browser restart, but it’s non essential. Easier yet is opening Vivaldi settings and using the keyboard shortcut for opening devtools.
-
@guigirl You need to enable
Temporarily unexpire M88 flags
and then you'll be able to restoreDebugging for packed apps
. Unfortunately, it's only a workaround. -
@guigirl You're definitively right and, first, that's what I told myself, but in the end I gave up. I'm too lazy & the flag's so handy.
-
@hlehyaric said in Inspecting the Vivaldi UI with DevTools:
Temporarily unexpire M88
Didn’t even know that existed, good find. Seems like the flags of the previous two versions can be reinstated. This will buy you a few months at most though. At the latest Chrome version 91 will put an end to this.
-
Oh no! That was 1 of only 2 flags I actually used. Gave the snapshot a try and while the speed dials are pretty ugly, losing this flag is just mean
-
Noticed it too... Luckily,
--debug-packed-apps
on the shortcut still work :S -
Maybe not especially handy, but I noticed triggering DevTools on the private window introduction page shows the tools for the UI too. The hunt continues…
-
@guigirl starting to think a config file ie. .vivaldirc will be a good idea..no?
-
@ch3f Personally I think it’s time someone wrote neovivaldi, then we could use an
init.viv
file for that purpose. -
FYI, the
chromium-flags.conf
method……doesn’t work.
-
How do you debug javascript?
-
@Maxrunner By taking a look at the console.
-
@luetage you cant use the debugger flag to see whats happening in real time?
-
@Maxrunner Wait, who uses that?
Anyway, you can
- find the file in the sources panel & set up the breakpoints you need
- set up DOM modification breakpoints in the elements panel
-
@potmeklecbohdan i tried to put the break points but doesnt seem to stop at them
-
@Maxrunner They work for me. Are you sure that section of code is actually running?
Maybe throw a
console.log()
in there, so you can check the console to make sure it is executing. -
@nomadic nevermind...
-
LaunchLunch V with--remote-debugging-port=9222
(or any other), then (ideally using a different browser, or at least window) navigate tohttp://localhost:9222/
(use the same port number) & select the relevant entry.(& yes, you can use this to inspect the window you have the devtools in)
-
@potmeklecbohdan Good find. That’s what I was looking for months ago.
-
@potmeklecbohdan Added remote debugging and inspecting through private window introduction to the methods. Now we only need to find 36 more ways to reach 42!