Edit the developer tools contextual menus in Vivaldi

Introduction

The Vivaldi User Agent is a strong and fairly recent contender in the ongoing “which browser is my favourite” debate. I downloaded it a while ago but never really got to grips with it, particularly from a Web Developer’s perspective.

Lately though, I’ve started giving it another go…

Tedious contextual menu setup

This article relates to an almost deal-breaker feature where inspecting an element was a tedious manoeuvre of right-clicking (for a contextual menu), sliding down to a submenu, then sliding across to select the Inspect menu item.

Given how often I do this on a daily basis the annoyance factor soon mounted up. The following explains how to edit the menus to a custom configuration.

The images above show what we will achieve in this article, from multi-move down to two steps. Perfect.

Step 1. Locate the menu settings

Whilst there is documentation that covers this procedure it took me a while to figure it all out, including that there were multiple Developers Tools sections. I’ll start with the Page menu as that’s the quickest to test.

Procedure to remove subfolder

1. Go to Settings > Appearance
2. Scroll down to the Menu Section
3. Select Page from the dropdown
4. Scroll to the bottom of the menu choices
5. Right click [Developer Tools] (as Subfolder)
6. Deselect Show as Subfolder

Step 2. Drag-n-drop, add optional separator

As I personally use the contextual menu items Back & Reload even more than Inspect et al, I left them pride of place at the top.

Procedure for menu items placement

1. Select the [Developer Tools] menu item and ‘drag’ to your desired position. Then ‘drop’ to place it there.
2. Optional. Add a separator below by selecting [Developer Tools], right click for contextual menu and select New Separator

That’s it, job done for ‘Page’ – but there’s more…

You can now test your new setup on a webpage and make further edits as you see fit.

However, in order for this to work across all the contextual menus on offer you’ll need to do the same procedure for each of the following as found in the dropdown menu;

• Audio and Video
• Image
• Link
• Page (this is the one that’s been edited)
• Selection
• Text Field

Each of these has a [Developer Tools] section inside of a submenu.

Final thoughts

There’s a lot to love about Vivaldi but there are some improvements that could be made to make it more Developer friendly. Using this technique removes one annoyance, there are others, but I’ll leave that for another post.

I also intend to write about other tips I have for configuring the settings to assist in the overwhelm that firing up Vivaldi for the first time instills. Till then, hope this article has helped.

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave