DEV Community

Cover image for Vivaldi Browser: Must-have extensions for developers
Constantine
Constantine

Posted on • Edited on

Vivaldi Browser: Must-have extensions for developers

Having the right tools can help a lot in web development. Vivaldi is flexible and customizable, which makes it a good choice for developers who want to work better.

Getting to know the Vivaldi browser: A developer's best friend

Vivaldi is a simple and user-friendly browser with many features for developers. It has an easy interface and performs well, making it good for coding and testing websites. You can customize it to suit your needs, making it a valuable tool for web development.

Why Vivaldi stands out for developers

Vivaldi lets users customize a lot, setting it apart from other browsers. It has tools to manage tabs, take notes, and use web panels, helping developers stay organized and work well on different tasks. Also, Vivaldi cares about privacy and security, so developers can work without worrying about their data.


Productivity and workflow: Streamline your tasks for optimal efficiency

Efficient task management is essential for maximizing productivity and workflow. Vivaldi provides a variety of extensions designed to streamline daily tasks and boost overall efficiency.

Tab management made easy

Having many tabs open can make your browser slow. These tools can help:

  • OneTab: Changes all your open tabs into a simple list, making your computer run better.

  • Eversync: Syncs your bookmarks and tabs on different devices, making them accessible anywhere.

  • MaxFocus: Link Preview: Shows previews of links so you can look at pages without opening new tabs, keeping your browser clean.

MaxFocus: Link Preview extension in action

Time management tools for enhanced productivity

Managing your time well is important to stay focused and get things done. Here are some extensions to help you manage your time:

  • StayFocusd blocks websites that waste your time. You can block everything except allowed sites, helping you stay focused. It also has a "Nuclear Mode" for instant blocking.

  • RescueTime tracks your time spent on websites and apps. It shows you your habits so you can make better choices and be more productive.

By incorporating these productivity and time management extensions into your Vivaldi browser, you can optimize your workflow, stay organized, and boost your productivity levels to achieve your development goals efficiently.


Coding and development tools: Enhance your coding experience

In coding, the right tools help you work better. Vivaldi is a simple, customizable browser. It has many useful extensions for developers. Adding these tools to Vivaldi makes coding easier and helps you work more efficiently.

Code editors and viewers: Simplify your coding tasks

You need tools to help write and fix your code when you code. Vivaldi has helpful add-ons for this. These add-ons make writing and fixing code easier. They help you quickly find and fix errors. Adding these tools to your Vivaldi browser makes your coding work smoother and better.

  • Web Developer: Adds a button to your browser and gives you many web development tools. You can inspect elements, debug JavaScript, and manage CSS styles anywhere. It makes changing and testing your web pages more accessible.

  • JSON Viewer Pro: Helps with working on JSON data. It shows JSON data clearly. You can expand and collapse parts to see the structure better. This helps you find and fix errors more easily.

These tools make your coding more efficient and correct, allowing you to focus more on creating robust and good code.

Debugging and testing: Ensure code quality and functionality

Debugging and testing are essential steps in making sure your code works everywhere. Vivaldi has tools to help:

  • Postman Interceptor: Helps test and document APIs quickly.

  • Lighthouse: A Google tool that makes web pages faster and better by giving tips after running tests.

  • Wappalyzer: Shows what technologies websites use, making debugging easier.

These tools help you find and fix problems early, ensuring your code works well.


Version control and collaboration: streamline development processes and teamwork

In version control and teamwork, good tools make development more accessible and help the team work well together. Vivaldi has add-ons that improve version control and help the team work smoothly. This keeps projects on track and makes sure everyone understands each other.

Git integration for Seamless Code Management

When managing code, Git integration is handy. Vivaldi has extensions to help with this:

  • Octotree: This tool shows a code tree for GitHub projects. It makes it easy to move through big codebases and find files. Octotree simplifies reading and reviewing code, which is good for developers working on big projects.

  • Gitpod: This tool is for GitHub users and lets developers work on code in the browser. It removes the need to set up complex environments and has features like code editing and sharing. Gitpod helps developers work well together and improve the quality of their code. It makes teamwork smoother and boosts productivity.


Design and UI/UX tools: Elevate your design experience

In design and user experience, the right tools can make your projects look and work better. Vivaldi is flexible and easy to use, which makes it great for designers and UI/UX professionals. It has many extensions that help these users. Adding these tools to your Vivaldi browser can make your design work easier and boost your creativity.

Color and font pickers: Enhance your visual palette

Picking the right colors and fonts is important for making good designs. Vivaldi has some extensions to help:

  • ColorZilla

    • A color picker and gradient tool.
    • Helps you choose and use colors easily.
    • Creates good color schemes and gradients.
    • Lets you adjust your project's color choices.
  • WhatFont

    • Finds fonts used on any webpage with one click.
    • Helps keep your design consistent.
    • Makes sure fonts match your brand and design goals.

These tools make the design process easier. ColorZilla helps you select the best colors for your project. WhatFont lets you find fonts quickly, helping keep your design consistent. Adding these extensions to Vivaldi can improve your design work and make you more efficient.

Design Inspiration and prototyping: Bring your ideas to life

When you need ideas and tools for designs, these Vivaldi extensions can help:

  • Designer Daily Report: Gives you design tips and daily ideas. Keeps you updated on new trends.

  • Muzli: Shows daily design trends and examples. Keeps your ideas fresh.

  • Panda: Brings top ideas from several sites like Product Hunt and Dribbble. It keeps you updated without needing to visit many sites.

These Vivaldi tools can help you get ideas and complete your designs.


Security and privacy: Safeguard your online presence

Cybersecurity threats are constantly changing, so it is important to protect your private information. Vivaldi offers extensions to keep your online activities safe and private.

Password management: Securely store and manage your credentials

Good password management is crucial for protecting your accounts and sensitive information. Vivaldi offers great password management tools like LastPass and Bitwarden to help you securely store and auto-fill your passwords.

  • LastPass:

    • Keeps your passwords and private information safe.
    • Gives you easy access to your passwords with strong encryption.
    • Auto-fills passwords to save time.
    • Lets you access your saved passwords easily.
  • Bitwarden:

    • An open-source password manager.
    • Provides a secure place for storing and using passwords on different devices.
    • Keeps your private information safe.
    • Allows sharing of passwords with trusted people.

Using these tools helps protect your data and makes managing passwords simpler.

Privacy enhancements: Shield yourself from online threats

Protecting your browsing privacy is important to stop unwanted tracking and data collection. Vivaldi has privacy tools like uBlock Origin and HTTPS Everywhere that help protect you online.

  • uBlock Origin Lite:

    • Blocks ads and trackers.
    • Makes browsing cleaner and faster.
    • Keeps your privacy by stopping tracking.
    • Saves data by blocking unwanted content.
  • MaxFocus: Link Preview

    • Lets you preview links without opening new tabs.
    • Warns you if a previewed website is malicious.
    • Removes tracking from previewed URLs.

Using these tools, you can browse with more privacy and security, keeping your data safe from threats.


Browser extensions for specialized development needs

Besides the usual tools, some extensions meet specific development needs. These tools support different parts of web development.

Accessibility tools: Make the web accessible

Making websites usable for everyone, including those with disabilities, is crucial. These tools help check and ensure your site meets accessibility standards:

  • axe DevTools - Web Accessibility Testing:

    • Checks websites for accessibility issues.
    • Gives detailed reports and fixes.
    • Ensures you meet accessibility standards.
  • WAVE Evaluation Tool:

    • Provides visual feedback on web content accessibility.
    • Identifies and shows accessibility errors.
    • Helps improve the user experience for all visitors.

Using these tools ensures your site is user-friendly for everyone.

SEO Tools: Enhance Search Engine Performance

To make your sites easy to find, use these SEO extensions for search engines:

  • SEOquake:

    • Analyzes SEO metrics for webpages.
    • Provides insights on keyword density, links, and more.
    • Helps improve search engine rankings.
  • Website SEO Checker:

    • Offers instant SEO checks.
    • Reviews meta tags and keywords.
    • Helps boost your site's SEO.

Using these tools in Vivaldi helps optimize your sites for search engines, drawing more visitors to your projects.

API Development: Simplify API Workflows

For developers working with APIs, these tools ease testing and documentation:

  • Swagger Inspector:

    • Tests REST APIs.
    • Provides a simple interface for API requests.
    • Helps document your API endpoints.
  • Yet Another REST Client:

    • Tests and debugs RESTful APIs.
    • Sends HTTP requests, inspects responses, and analyzes headers.
    • Supports various authentication methods.

Using these API tools simplifies development and ensures your endpoints work well.

Conclusion: Boost your development with Vivaldi extensions

In conclusion, using extensions makes development work easier and more productive. Adding these tools to your Vivaldi browser can help streamline your tasks, improve your coding, and speed up your work. It's important to see how useful these extensions can be, as they offer specific solutions for developers' needs.

As you start using Vivaldi for development, try the many extensions available and set up your browser to match your needs. Tools like MaxFocus: Link Preview help you manage tabs better, keeping your browser neat. Whether you need tools for work, coding, teamwork, design, or keeping data safe, Vivaldi has options for everyone. Take the time to try different extensions and customize your browsing experience.

Read after: Make your own Arc alternative at home

Top comments (15)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

OneTab

It may not be as convenient, but vivaldi already gives you the option to save all open tabs to a session. This comes with the advantage that it restores tab stacks and is accessible from the quick command box.

Eversync

This is cool for people who use different browsers across devices, but if you use vivaldi everywhere, the built-in sync already does this as well.

Link Preview

This one is super cool; I'm absolutely installing it :)

StayFocusd

This is also really cool; I used to have a similar extension a while ago but ended up not using it much out of habit.

RescueTime

This one is also kinda cool; but I would recommend ActivityWatch instead, which is a program you run on your computer that does this for open windows and saves its data to a disk so you can sync it with your sync tool of choice.

It also offers a web interface with lots of features and a json export for anyone hardcore enough to want to process their own time data.

Collapse
 
best_codes profile image
Best Codes

Opera is still better for me. :)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Does Opera have any features vivaldi doesn't have? I stopped using it years ago after it had gone from one of the most powerful browsers with opera 12 to a near-featureless chromium fork with opera 15; at the time, vivaldi was basically just all of opera 12's features on a chromium browser.

Collapse
 
best_codes profile image
Best Codes

Opera Developer allows you to use run AI models locally in the browser sidebar, no internet required.

Plus, although Opera doesn't have some features of Vivaldi, I still prefer it because it does what I need and Vivaldi's features are just too cluttered for me.

Collapse
 
azadnishad profile image
Nishad Azad

Sounds Crazy

Collapse
 
oggo profile image
oggo

All this sounds fine and cool, but why not using simply chrome? What are the vivaldi advantages compared to chrome?

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Tab stacks, workspaces, sessions, notes, tab tiling, quick command box, built in QR generator, multiple speed dial tabs, built in calendar, built in email, built in rss reader, built in website translation, built in ad/tracker blocker, encrypted sync, command chains, and a bunch more.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

or better yet, Chromium without proprietary commercial extension? I have been using Vivaldi as an alternative to Firefox which didn't run quickly on my mobile. Vivaldi allowed me to sync my history etc. between mobile and desktop. I don't use this feature anymore, but I still stick to Vivaldi for its higher customizability compared to Chromium/Chrome/Edge. But, like Firefox and Chrome, the teams keeps adding more and more features that get in my way until I turn them off, so I will probably go back to Chromium or Firefox some time.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Kinda curious: what features did vivaldi add that actively get in your way? I found most of the stuff can easily be ignored if you don't want it; the only recent thing I can think of is the addition of the workspace picker to the task bar which would take up space needlessly if you don't use them, but that's about it.

Thread Thread
 
ingosteinke profile image
Ingo Steinke, web developer • Edited
  • bloated context menu
  • open in tab stack (accidentally clicked/tabbed instead of new tab)
  • save to note
  • side bar
  • address bar history search preferring irrelevant deep links from history instead of bookmarked home pages
  • layout shift in new Vivaldi context menu: entries that were initially visible become hidden in behind a scroll arrow before I can click on them
  • unintuitive menu text or rather a cross-browser inconsistency: "open in new tab" means "open in background tab" in Chromium but means open and focus in Vivaldi
Collapse
 
best_codes profile image
Best Codes

I've not had any issues since the update. I like it. :D

Collapse
 
array_dot_reduce profile image
Bhaskar Ghale

Any Arc users here?

Given the recent gaffes of LastPass, could you recommend other alternatives?

Collapse
 
qostya profile image
Constantine

Maybe Bitwarden? A lot of people recommend it

Collapse
 
martinbaun profile image
Martin Baun

Second BitWarden, it's one of the most secure and very well priced too!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.