Inspecting the Vivaldi UI with DevTools

[hlehyaric]

Debugging for packed apps is back in chrome 91 (latest snapshot 2289.3)!

[nomadic]

@hlehyaric Looks like we have it until at least Chromium 100!

Excerpt from here:

  {
    "name": "debug-packed-apps",
    "owners": [ "benwells", "raymes" ],
    "expiry_milestone": 100
  },

[luetage]

@nomadic No point in adding it back in anyway. People who know know, all others are better off using alternative methods anyway. Anything but the flag is more straightforward anyway.

edit: do I get style points for using “anyway” 3 times? Anyway, how is everyone?

[hlehyaric]

@luetage We need a new flag Disable "anyway" in posts.

[luetage]

@hlehyaric said in Inspecting the Vivaldi UI with DevTools:

@luetage We need a new flag Disable in posts.

How did you do that :o

[hlehyaric]

@luetage VF Mod magic.

[dude99]

Guys, I just discover a very convenience way to access the devtool inspector for browser GUI without all the flag/command/context menu fuss:

1. Open vivaldi://inspect/#apps as tab.

2. Click + button on Panel to Add Web Panel.

3. From now on, inspect all the #%$#^% you want to your heart content via the panel with just a click!

[luetage]

@dude99 The page is mentioned in the guide. I don’t see how this is convenient, you have to open the webpanel and then click on a specific entry. Instead you can open a valid page with a keyboard shortcut or quick commands and issue the shortcut for devtools. With one key shortcuts that’s potentially only 2 keys without clicking anything. Oh well, maybe this is the superior method for people who prefer clicking.

[dude99]

@luetage said in Inspecting the Vivaldi UI with DevTools:

The page is mentioned in the guide.

Yes, I learn that from your guide. Then, when I fed up with opening that page repeatedly, I decided to pinned it to the panel... & realized it's much easier to use than Bookmark & SpeedDial > New inspect tab. So I decided to share my "wisdom" with everyone. LOL

Instead you can open a valid page with a keyboard shortcut or quick commands and issue the shortcut for devtools. With one key shortcuts that’s potentially only 2 keys without clicking anything.

What?! We can inspect the browser GUI with devtool directly with shortcut key? I don't know about that... I only know we can inspect the webpage via shortcut key, but not the browser GUI.

So, what's the shortcut key? This definitely will make my life a lot easier!

[luetage]

@dude99 All 3 devtools shortcuts listed in vivaldi://settings/keyboard/ work.

[luetage]

@guigirl You’ve done it again. Vivaldi will seize all your kangaroos should you continue the oting.

[dude99]

@luetage I know about those 3 shortcuts, but they only limited to webpages... Unfortunately non of them work on the browser GUI.

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