Assign Shortcut for Inspecting an Element

[herrstrietzel]

Once again: Please add an option to assign shortcut for inspecting an element!

Sorry folks, this has probably been submitted hundreds of times.

but for some reasons it was also perfectly ignored over ... and over ... and over again - the problem still persists: we can't really use Vivaldi as a browser for web development due to it's lack of a snappy element inspection.

See:
https://forum.vivaldi.net/topic/66223/add-an-option-to-assign-shortcut-for-inspecting-an-element

The currently accepted answer is completely missing the point.

Sure, we can open dev tools via a custom shortcut but we still can't directly inspect elements using the commonly used shortcut ctr+shift+C - as used in pretty much any chromium/blink based browser ... erm ... or Firefox ... admittedly, not sure about webkit.

However it is safe to say, ctr +shift +C is kind of a standard used by web devs all over the world. Missing this feature is a huge bummer.

Sorry, for being so obnoxious but once again I'm not talking about a shortcut to open dev tools but about the shortcut to run dev tools in element inspection mode – every web dev knows what I'm talking about. No, Ctr+Shift+I is still not the solution.

So please, try to include this defacto standard in future versions of Vivaldi or at least provide a way to specify a custom shortcut.

--
ModEdit: Title

[luetage]

@herrstrietzel You add to the confusion by not specifying you want the shortcut to work when the developer tools are in focus and not in inspect mode. Because I assume that’s what you want, otherwise the shortcut exists.

edit: Ok, so it turns out the developer tools shortcuts work when devtools are in focus. With devtools in focus I can press Ctrl-Shift-C and Toggle Inspect Element Mode is being toggled as expected. Not quite sure what you really want. In my opinion the only thing missing is a way to switch focus between webpage and devtools with a shortcut.

[herrstrietzel]

@luetage said in Once again: Please add an option to assign shortcut for inspecting an element!:

You add to the confusion by not specifying you want the shortcut to work when the developer tools are in focus and not in inspect mode.

Dear @luetage: I highly appreciate your quick reply. But - pardon, me – you must be kidding: I'm clearly talking about the inspect element behavior you know in pretty much any web browser. Sorry I certainly can't hide my frustration - but it seems quite "kafkaesque" to tackle this issue on Vivaldi forum. The specific shortcut doesn't matter at all (as long as I can change it).

The point is: In any browser I can immediately switch to inspection mode and select an element - it shouldn't matter whether the dev tools window is in focus or not (test it in any other browser). In other words: focusing the dev tools window to get a new selection works - but it's not a great solution and less convenient than in any other browser.

Please don't get me wrong, Vivaldi probably handles things differently from other blink based browsers that's actually cool – maybe there is an internal reason why Vivaldi can't easily provide the instant inspection mode as provided by brave, chrome, opera, edge, firefox etc.

But element inspection needs to be fast and intuitive – as provided by other browsers. Vivaldi is rather underwhelming in this respect - and I thinks this is a shame as it has so many great features and there is no shortage of blink based browsers which are becoming worse (... I might be thinking of a browser starting with "O"). In other words Vivaldi is missing out to become a dev's favorite.

So, with all due respect, I'm certainly not adding to the confusion - I've made my point very clear, as have the previous users who complained about this missing feature.

[luetage]

@herrstrietzel But there is a command to open devtools and immediately be in inspect mode, it’s called “Toggle Developer Tools.” There are three devtools commands, all of them toggle devtools, but they do different things.

Developer Tools opens devtools with the last tab you used (elements, console, etc.)
Toggle Developer Tools opens devtools in inspect mode
Developer Tools Console opens devtools in console tab

Use the one you need to open devtools, any of them will close devtools when open but not focused. And yeah, I get that when devtools is open and not in inspect mode, and you have the webpage in focus there is no shortcut to go into inspect mode, but you can use the shortcut Toggle Developer Tools 2 times in this case: once to close devtools, the second time to bring up devtools in inspect mode. This is a minor quirk, but you could create a command chain which executes Toggle Developer Tools 2 times and assign a shortcut to it.

Yes, Vivaldi doesn’t behave like other Chromium browsers, that’s because Vivaldi has its own system of shortcuts. But it’s so flexible that you should be able to get to a setup that works for you.

[herrstrietzel]

Thank you very much for your reply.
I apologise if my post was a little too passionate.
But unfortunately, the current implementations are still not ideal and not on par with other browsers.

Here is an example from a front-end debugging perspective:
I need to check which CSS rules are applied to an element.
Let's say there is something odd with my <h1> heading - maybe I see an undesired wrong font-family.

In most browsers I click Ctr+shift+C
(doesn't really matter but it's worth noting this shortcut is well chosen because it's quite ergonomic - alls keys are nearby) and hover/click directly on the rendered heading => Once selected I can see all CSS properties.

Let's say there is something wrong with the adjacent <h2> - once again I click the shortcut and select the element by mouse input.
Actually, this shortcut for immediate element selection is probably the most used shortcut for any front-end developer.

The suggested dev tools toggle options are not remotely the same - sorry.
I think a lot of people wonder, why Vivaldi deviates so much from the inofficial defacto-standard.

[luetage]

@herrstrietzel You don’t have to apologize for anything. But give me a chance. Point is this isn’t so much a feature request, as it is a bug report. That bug report already exists and hasn’t been fixed ☛ VB-35278.

Please try this workaround:
On a fresh profile Ctrl-Shift-C is assigned to “Copy Selected Text to Note.” Find that shortcut and delete it in vivaldi://settings/keyboard. Visit vivaldi://setttings/qc, create a new command chain with the + button.

Name: Inspect
Command 1: Toggle Developer Tools
Command 2: Toggle Developer Tools

Head back to keyboard settings, open the chain section and assign Ctrl-Shift-C to the newly created “Inspect” command.

Now when you have devtools open, no matter whether the focus is on devtools or on the webpage, you will go into inspect mode with the Ctrl-Shift-C shortcut. When devtools isn’t open you can either open it first with F12 (on a default installation this is bound to the Developer Tools command described in my last reply) and then use Ctrl-Shift-C, or you create an additional shortcut for Toggle Developer tools to open in inspect mode. This could also be a toolbar button in the user interface or a mouse gesture, or a menu entry, whatever you think would fit.

I’m well aware this isn’t exactly what you want, but it is the closest thing you can do right now without doing a custom modification to the browser and injecting some Javascript to handle both cases with the same shortcut. I do believe it’s possible to mod this and you might as well give it a try, if you feel you gotta have it your way right this instance.

[herrstrietzel]

@luetage Thanks for your detailed feedback!

As you already mentioned the current state/implementaions can't perfectly replicate the convenient "instant-element-inspection" as provided by other browsers. Since the Dev Tools and also the element inspection actually work flawlessly (just not as convenient), I wouldn't call it a bug. Highly speculative: The common chromium behavior was maybe not implemented from the beginning as Vivaldi also tried to replicate the best from the golden era of Presto-Opera (If I remember it correctly, Dragonfly had a similar behavior when running inspection).

Hence, I just highly recommend to implement this in future versions of Vivaldi.

It's worth noting that many Chromium/Blink-based browsers are in decline - Vivaldi could attract more dev users by adding that little convenience functionality that many devs are not willing to do without.

• most notably Jon Stephenson von Tetzchner's former employer Opera (yeah, i still use it for sentimental reasons – the presto days being a user between v8-12) – Vivaldi would be the most obvious alternative
• ... admittedly there is also a huge amount of people who use a chromium/blink based browser which is the successor of Internet Explorer (ignoring the fact it's repeating a lot of questionable practices it's vendor was already sued for in the late 90ies ... but the benchmarks
  ... yikes!)
• there are also many users considering google's chrome as not ideal (for ... the google stuff reasons)
• Brave is probably your main competitor as a nicer alternative to google chrome – no mouse gestures, far less inbuilt features

So please consider to implement the described inspection behavior in future versions.

[DoctorG]

@herrstrietzel said in Assign Shortcut for Inspecting an Element:

However it is safe to say, ctr +shift +C is kind of a standard used by web devs all over the world. Missing this feature is a huge bummer.

Broken, not missing. And a already confirmed Vivaldi bug.

[herrstrietzel]

@luetage said in Assign Shortcut for Inspecting an Element:

VB-35278

@DoctorG: Thanks for your answer. But to embarrass myself... where can I find known issues like VB-35278? I haven't found a link to anything like a bug tracker? Actually a bug tracker link should be provided when filing a bug - ideally existing bug reports when mentioned in forum posts should also be linked.

[mib2berlin]

@herrstrietzel
Hi, the bug tracker is not public but you ask about the status of a report in the bug status thread:

https://forum.vivaldi.net/topic/27450/what-is-the-status-of-vb-already-reported-bug-issue/

VB-35278 is confirmed and has higher priority now.

Cheers, mib

[herrstrietzel]

@mib2berlin: Thanks for your response!
pardon me, but I wonder how Vivaldi users should find duplicate issue reports this way.
Frankly, I don't see how the aforementioned link can replace a proper bug-tracker or even give some useful info about the current state of development – some info about upcoming availability or progress could be helpul (e.g. availability in upcoming nighty builds/betas) ... and should be more public or easier to find.

[mib2berlin]

@herrstrietzel
The Vivaldi team have a bug tracker but only they and some volunteers like me have access to it.
I would like to look into the Opera, Edge bug tracker but it is closed.
First I would check is the desktop block where snapshots (Beta) builds are announced.
The team never give an ETA on anything but this is the same for the most software companies (Hardware too).

https://vivaldi.com/blog/desktop/

Cheers, mib

[MonteMartin]

@luetage I've setup the QC based workaround you suggested. It seems to work by closing dev tools and immediately re-opening in inspect mode. Unfortunately closing devtools clears the state of some parts of the panel. For example the .cls dropdown in Styles pane is closed, and the currently selected element is changed. That means Vivaldi is still unsuitable to most FE workflows.

I've read through a number of the comments regarding this issue and the issue has been thoroughly covered. So all I have to add is please fix this. As a front-end dev I use the CMD+Shift+C keyboard shortcut hundred of times every day. It simply isn't feasible for me to use a browser that doesn't handle it correctly, but every other Blink based browser has so many other issues.

I'm also wondering, is it possible to get an alert of some type if VB-35278 is fixed/closed? I'd prefer not to ask in a forum thread every week.

[tobbelundberg]

I just asked, and unfortunately there is currently no one working on this issue
https://forum.vivaldi.net/topic/27450/what-is-the-status-of-vb-already-reported-bug-issue/2805?_=1739282067270

[DoctorG]

@tobbelundberg Devtools is no so important for most users. Sad.
Sometimes i am forced on using ungoogled Chromium for web development.

[tobbelundberg]

@DoctorG said in Assign Shortcut for Inspecting an Element:

Sometimes i am forced on using ungoogled Chromium for web development.

Haha. That's exactly what I ended up doing right now too

[DoctorG]

@tobbelundberg said in Assign Shortcut for Inspecting an Element:

Haha.

I have less fun to laugh when Vivaldi as favorite browser is a broken tool for webdevs.

[lokedev]

I'm sad to read this thread, as I am working on moving over permanently to Vivaldi as the only browser I use. As a developer relying on this shortcut and have it in my muscle memory, this kinda seem like a dealbreaker for me. I hope it get fixed soon.