Developer Tools improvements: remember window position & direct Inspect Element option

antw

Hi Vivaldi Team,

I have a couple of suggestions regarding the Developer Tools that would really improve the workflow for web development and debugging:

Remember DevTools window position
Currently, when the Developer Tools are opened in a separate window, it always opens in the default position. It would be great if Vivaldi could remember the last position and size of the DevTools window (just like Opera does), so it opens exactly where it was when last closed.

Make "Inspect Element" more accessible
When right-clicking on a page element, it would be much more efficient if the "Inspect Element" option were directly available at the bottom of the context menu—rather than hidden under a submenu.
Also, it should open DevTools with the relevant element already selected, matching the element that was right-clicked. This would align with how other Chromium-based browsers behave.

Thanks for the awesome work on Vivaldi, and I hope these suggestions can be considered for future updates!

Pesala

@antw Please vote for A highly quality inspect element feature / developer tools and Developer Tools Window Show Remember its Layout.

Welcome to the Community. Here are a few links for your bookmarks that you may find useful:

antw

@Pesala The thread you linked is apparently 3 years old, and this change still hasn’t been made, so I think it’s fair to bring the matter up again in my new thread.

luetage

@antw Feature requests are logged, the duplicates are being ignored. Reply and upvote the original.

About make inspect element more accessible: We have a “developer tools elements command” which opens the devtools in inspect mode (ready to click an element on the page for inspection). You can create a keyboard shortcut for that one.

Alternatively create a command chain with this command and from the toolbar editor drag the command chain as button into any toolbar. This will allow you to click the button and then an element on the page. Since you are already using the mouse it’s a good way to handle it.

KooiInc

@antw Inspect element is not available (at least not in my vivaldi browser). Apart from the excellent suggestion to display 'Inspect' directly in the context menu, I would really like 'Inspect element' to be included in it. As a web application developer I used this a lot. It is available in Chrome, Opera and Firefox under the context menu.

Otherwise I have to remark: my switch to Vivaldi (a month ago) was quite flawless and satisfying.

Pathduck

@KooiInc It works fine here, choosing Inspect on a page element will open devtools focused on the element.

KooiInc

@Pathduck I stand corrected! Still, I would like to see the menu option lifted to the root of the context menu

Pathduck

@KooiInc I have it there:

KooiInc

@Pathduck

How lucky your are! I'm running vivaldi on windows11.

Pathduck

@KooiInc Strange this hasn't already been mentioned in this topic, maybe I should've just linked it:
https://help.vivaldi.com/desktop/appearance-customization/customize-application-and-context-menus/

KooiInc

@Pathduck Got it, thanks!

KooiInc

@Pathduck I have noticed a strange thing. In https://kooiinc.github.io/js-stringweaver/Examples/, when I right click a 'details' element, the customized context menu appears (#1). When I open the details element and subsequently right click one of the options, the default context menu appears (#2).

#1

#2

Pathduck

@KooiInc I guess I also should have said:

Repeat for the relevant Web Page elements. In this case it would be a "Link".

KooiInc

@Pathduck Ok, found it, thx. Not intuitive imho (you would say [Web Page > Page] would be on top of the hierarchy, but I suppose that's a developer perspective).

Pathduck

@KooiInc Complexity offers flexibility. As a web developer I'm sure you appreciate that