Inspecting the Vivaldi UI with DevTools

[Maxrunner]

How do you debug javascript?

[luetage]

@Maxrunner By taking a look at the console.

[Maxrunner]

@luetage you cant use the debugger flag to see whats happening in real time?

[A Former User]

@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

[Maxrunner]

@potmeklecbohdan i tried to put the break points but doesnt seem to stop at them

[nomadic]

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

[Maxrunner]

@nomadic nevermind...

[A Former User]

Launch Lunch V with --remote-debugging-port=9222 (or any other), then (ideally using a different browser, or at least window) navigate to http://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)

[luetage]

@potmeklecbohdan Good find. That’s what I was looking for months ago.

[luetage]

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

[luetage]

@guigirl Damn, my fault… Would the gift of a shrubbery appease you?

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