List of all Top Chrome Browser Extensions for Web Frontend Development

Most of us have been using Chrome and Firefox browser for web development and normal surfing in daily life. If you are a UI/UX designer or Web Frontend Developer, it might be wise to leverage best use of Chrome and Firefox browser by installing browser extensions to achieve more productivity. Browser Extensions exist to make some task automated, make few things simple to use and aid in reducing some additional effort to achieve something.

It has been know that Chrome browser is widely used compared to other browsers and so browser extension ecosystem is pretty good on Chrome MarketPlace. You can find various chrome browser extensions free to use without any ads or having to share any personal data. You can find various extensions of different categories like Blogging tools, Developer Tools, Fun, News & Weather, Photos, Productivity, Search Tools, Shopping Social & Communication Sports, etc.

As a Fullstack Web Developer, I always look for useful browser extensions that could reduce my development efforts and improve my Web Development experience. I have compiled a list of chrome extensions that I use while doing frontend web development.

The Best Chrome Extensions for Web Developers

Table of Contents

Dimensions

If you have come across a Figma, Adobe XD, InVision, Zeplin or Sketch design prototype prepared by UI Designer, then you would have noticed that those tools can display dimensions between different UI component layers. But how do you confirm if the same dimension and HTML CSS component is coded well with good CSS Box Model without messing up with overuse of margin/padding ? You can leverage this extension to measure screen dimensions.

You can do tasks like:

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn’t really work with images because there the colors change a lot pixel to pixel.
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.

Web Developer

The Web Developer extension adds a toolbar button to your chrome browser with various web developer tools. It offers HTML, CSS, Forms, SEO related tools and customization features. Useful for debugging and increasing the development productivity.

ColorPick Eyedropper

You can now learn about your favourite color used in image or UI component by using this extension. ColorPick Eyedropper extension is a zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

CSS Viewer

CSSViewer is a simple CSS properties viewer which would show a modal. containing CSS details of the selected HTML dom nodes or elements. Quite helpful to quickly find CSS Box Model properties, color code, font usage, etc.

Lorem Ipsum Generator

The Lorem Ipsum Generator is a browser extension that allows you to quickly generate placeholder text in a variety of formats. It is designed to be easy to use, with a user-friendly interface that allows you to select the desired length of the text, whether in paragraphs, words, bytes or lists. Additionally, the extension stores your preferred options, so your chosen format will always be immediately available. With its elegant design and useful functionality, this extension is a great tool for web designers, developers, and content editors who need to generate placeholder text quickly and easily.

JSON Viewer

JSON Formatter is a browser extension that offers a highly customizable and visually pleasing way to view JSON and JSONP data. It is designed to make it easy to read and understand the structure of the data, with features such as automatic indentation and color-coding of different elements.

Additionally, it offers a variety of customization options, such as the ability to change the color scheme, so you can tailor the appearance to your personal preferences. Overall, JSON Formatter is a sleek and powerful tool for anyone who works with JSON data, and wants a more pleasant way of viewing it.

Page Ruler

Page Ruler is a browser extension that allows you to measure distances (in pixels) on a webpage. It is easy to use, and provides a ruler that appears on the page when you move your mouse. The ruler has width, height, start, and end all labeled with corresponding metrics in pixels.

As you move your mouse, the rectangle changes its size, and all the numerics are updated. Activating the extension is as simple as clicking the toolbar button once, and disabling it is just as easy, by clicking the toolbar button again.

This extension works with mouse clicks on desktop computers and with touch on touch-enabled devices. It’s a useful tool for web designers, developers, and others who need to measure page elements.

UX Check

Image from https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

UX Check is a browser extension that allows you to quickly and easily run a heuristic evaluation on your website. It opens up Nielsen’s Ten Heuristics in a side pane next to your website, so you can easily identify issues related to usability. This extension is a great tool for usability experts, web designers, and developers who want to improve the user experience of their website.

When you click on an element that doesn’t comply with a heuristic, you can add notes and take a screenshot. This allows you to document any issues you find and share them with your team. At the end of the evaluation, you can export everything to a docx file, making it easy to share the findings and collaborate on improvements.

EditThisCookie

EditThisCookie is a browser extension that allows you to manage the cookies on your website. It is a powerful cookie manager that allows you to add, delete, edit, search, protect, and block cookies. It is the first and best cookie manager for Google Chrome. With EditThisCookie, you can perform a variety of actions such as:

Editing existing cookies
Deleting cookies
Adding new cookies
Creating cookies
Searching for cookies
Protecting cookies (making them read-only)
Blocking cookies (using a cookie filter)
Exporting cookies in a variety of formats, such as JSON, Netscape cookie file, Perl::LPW
Importing cookies in JSON
Limiting the maximum expiration date of any cookie
Improving performance by removing old cookies
Importing cookies.txt This extension is useful for web developers, testers, and anyone who wants more control over the cookies on their website.

SessionBox – Multi login to any website

SessionBox is a browser extension that makes it easy to use multiple accounts on the same website simultaneously. With just a click of a button, it creates an independent tab, allowing you to log into multiple accounts on the same site. This eliminates the need for multiple browsers or private sessions.

SessionBox also offers the ability to securely synchronize your sessions across devices by using your SessionBox account, so you can start a session on one device and continue it on another chrome browser.

It also provides a privacy feature, tabs managed by SessionBox do not use shared storage, variables are handled by the extension so other tabs and websites cannot monitor your activity. It provides an easy and secure way to manage multiple accounts and protect your privacy while browsing.

Session Buddy

Session Buddy is a browser extension that simplifies the management of browser tabs and bookmarks. It offers a variety of features to help you organize and navigate your browsing sessions more efficiently, such as:

Saving open tabs as collections that can be easily restored later, which helps free up memory and avoid clutter.
Recovering open tabs after a crash, so you don’t lose your progress.
Seeing and managing all open tabs in one place, making it easier to switch between them.
Searching open tabs and collections to quickly find what you’re looking for.

Session Buddy is a powerful tool for anyone who wants to have more control over their browser tabs, bookmarks and browsing session. It helps to organize and manage tabs, recover lost sessions and search across open tabs and collections making it easier to find what you’re looking for.

Tab Groups Extension

Tab Groups Manager is a browser extension that enhances the built-in “Tab Groups” feature of the browser, providing additional functionality for managing tabs

This extension is useful for anyone who wants more control over their browser tabs, by creating custom tab groups, saving and restoring groups, managing open and saved groups and creating custom grouping rules. It makes tab management easy and efficient.

axe DevTools – Web Accessibility Testing

Axe DevTools is a browser extension that allows developers, testers, and designers to check for accessibility issues during website development. It is a free and fast tool that is powered by axe-core, the world’s most trusted accessibility testing engine developed by Deque.

Using axe DevTools can help deliver better user experiences for everyone, including the 1 billion people living with disabilities today. It also helps in avoiding false positive results, improving accuracy, reducing the risk and cost of accessibility lawsuits, and reducing the need for manual testing, which helps to improve the development velocity.

ModHeader – Modify HTTP headers

ModHeader is a popular Chrome extension that allows you to modify HTTP request and response headers, as well as redirect URLs. It is a powerful tool that can be used to set various headers such as X-Forwarded-For, Authorization, Access-Control-Allow-Origin, Content-Security-Policy, and custom headers.

Additionally, it allows you to modify cookies in the request/response header, has an advanced Content-Security-Policy editor and enables header modification by URLs. With advanced filtering options, you can choose to apply header modifications to specific tabs, tab groups, or windows.

ModHeader is a useful tool for web developers, testers and security professionals who want more control over the headers of the requests and responses they are working with.

Allow CORS: Access-Control-Allow-Origin

Allow CORS: Access-Control-Allow-Origin is a browser extension that makes it easy to perform cross-domain Ajax requests in web applications. It allows you to add the (Access-Control-Allow-Origin: *) rule to the response header, which is blocked by default in modern browsers due to security reasons. By activating this add-on, you can easily unblock this feature and perform cross-domain requests.

This extension is useful for web developers who need to work with APIs that have CORS enabled or who need to test their web applications on different domains. It allows you to easily test your web applications and make sure that they are working correctly.

Tamper Chrome (extension)

Tamper Chrome is a browser extension that allows you to monitor and modify requests and responses sent by your browser. It gives you the power to see what websites are sending in the background, modify submissions, switch out scripts, alter AJAX responses, and more. You can modify requests as they go out and also modify the responses to a limited extent, such as headers, CSS, javascript or XMLHttpRequest responseText.

This extension puts the power of your browser back in your hands and it is useful for developers, testers, and security professionals who want more control over the requests and responses of the websites they are working with. It allows you to inspect and modify the network traffic, which can be helpful for debugging, testing and security analysis.

Resource Override

If you are a developer, you can simply override website javascript,css resource by pointing original site url to your localhost domain url. It can allow redirecting traffic, replacing, editing, or inserting new content and provides full control of the site. It’s good for debugging production websites, as you can edit and inject code on the fly. It also comes with inbuilt GUI code editor for URL you choose to replace the code with.

It also now allows Request and Response header modification with common use case presets (Enable CORS, force allow outside content, allow iframes… etc).

Disable Content-Security-Policy

Content Security Policy (CSP) is an added layer of security in browser that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. In case you are overriding resources of the site or running some custom javascript scripts on the webpage, you may require to disable Content Security Policy if site/browser disallows to run external scriptings.

Disable Content-Security-Policy extension allows to disable CSP headers and testing webpage. Disabling Content-Security-Policy means disabling features designed to protect you from cross-site scripting.

Clear Cache

Sometimes site can be cached and may display stale data or you want a quick way to clear the cache of the site to test something. You can quickly clear your cache with this extension without going through browser confirmation dialogs, pop-ups or other annoyances. You can clear cache using a single click on the icon.

You can also clear cookies globally, or only for certain domains and can customize what and how much of your data need to be cleared from different options like App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

Picture-in-Picture

Sometimes you come across some youtube or some other sites video but have a single screen monitor and want to work on something else together while watching the video. This extension is useful when you want to multitask while watching videos, you can keep an eye on the video you’re watching while working on something else.

This extension would allow to pop the video as a small modal popup which you can resize and move across different area of your screen and would be always on-top over the existing running applications. Floating player feature allows you to keep an eye on the video you are watching while also interacting with other websites or applications.

Disable Extensions Temporarily

The Disable Extensions Temporarily is a Chrome extension that allows you to easily disable all your extensions with just one click. This can be useful when you need to troubleshoot or temporarily turn off certain extensions without having to manually disable them one by one. Additionally, the extension remembers which extensions were previously enabled and allows you to re-enable them again with just one click. This extension is easy to use and free of cost.

Dark Mode

Dark Mode is a browser extension that allows you to quickly switch to a dark theme for the web, making it easy to use your device at night. The extension features a toolbar button that serves as an ON/OFF switch, allowing you to easily activate or deactivate the dark theme. If you don’t like the current theme, you can visit the options page and choose from over 50 available options. With Dark Mode, you can enjoy a comfortable browsing experience in low light conditions.

Octotree

Octotree browser extension is designed to enhance the code review and exploration experience on GitHub. It offers a variety of features to make your workflow more efficient and streamlined. Some of these include:

A fast, IDE-like code tree for easy navigation
Quick search in a tree format
The ability to bookmark repos, issues, PRs, and files
Support for GitHub themes
Support for private repositories
High performance, even when working with large repositories. With this extension, you can easily explore and review code on GitHub with more speed and efficiency.

Wappalyzer

Many of the times you will come across a site and would like to learn what frontend/backend tools it uses to keep the site up & running. Wappalyzer tool would let you identify technologies and will profile the techstack of the website. It also detects if the site is made up of readymade SaaS CMS platform tools, frameworks, ecommerce platform, JavaScript libraries, CSS framework and many more. It has more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others to be able to give you insight on the techstack of the site.

Download table as CSV

Need some mock data for your REST API or simply want a CSV file from html table present in the website, then you can just download the “Download table as CSV” extension and make your work easier without doing copy paste. Extract table data in MS Excel style CSV format. Once you have CSV, you can anytime convert to JSON using online tools if required.

JavaScript and CSS Code Beautifier

Some of the time you may wish to learn about different functions present in the Javascript files and it might become challenging if the CSS/JS code is minified and compressed. “JavaScript and CSS Code Beautifier” extension would detect .css/.js/.json file in the browser url address bar and automatically(optional) make source code beautiful. Has support foruUnpacking or deobfuscating JavaScript code and has different themes for syntax highlight with support for CSS(LESS/SCSS/SASS) / JavaScript(JSX/TypeScript/JSON) formatting.

whatfont

If you are a UI Designer surfing different websites and want to know what font is used in particular area, you can do it by getting “WhatFont” extension. Developers can find font by reading the CSS files through Chrome Developer Tools. But also you can inspect web fonts by just hovering mouse on them. It is that simple and elegant. It has supports for Supports Typekit and Google Font API. It can also provide details around the font including css property details.

Tampermonkey

Tampermonkey is one of the powerful chrome extension and lets you to manage custom javascript customization for every single sites. It is used to run so-called userscripts (sometimes also called Greasemonkey scripts) on different websites.

Userscripts is just a normal javascript functions written by you that can change layout or modify functionalities of the website or automate actions.

Tab Suspender

If you have more than 50+ tabs open in Chrome Browser, it may increase the memory usage and could slow down your browser performance. With this extension, you can automatically suspend, hibernate inactive tabs and save up to 80% of memory, This would optimize load on your device, battery and heat and help accelerate your browser. Works by automatically detecting inactive, idle or forgotten tabs and suspend / park them with the freeing 80% memory, device resources and battery life.

You can restore the tab to it’s state once you visit the tab. Also you can enable auto-close tabs function, which close unused tabs and holds count of tabs at the selected level.

Redirect URL, Modify Headers & Mock APIs

Requestly is a free developer tool that allows you to debug web applications by intercepting, modifying, and debugging network requests. This powerful web debugging proxy can redirect URLs, modify headers, mock APIs, modify responses, and insert scripts, making it a versatile tool for web developers. It offers a simple interface, collaboration features, and active support, and eliminates the need for a VPN. With features like Charles Proxy and Fiddler, Requestly brings powerful debugging capabilities directly to your browser.

List of tasks you can by this:

Set up redirects for APIs, Javascript (Switch Environment e.g. Prod to Staging)
Modify HTTP Request/Response Headers and Modify API Responses (Fixed Response or Programmatic Override)
Share debugging sessions with Video, console logs, network logs, and env details with teammates
Comes with inbuilt Mock Server
Inject external Javascript & CSS on any website for more customization.
Block & Throttle Requests for API,JS,CSS resources
Mock API Response for XMLHttpRequest (XHR) & Fetch Requests
Redirect URLs, Change Host, Modify Query Params (Map Remote or Map Local)
Block requests or Websites by matching keywords or URL criteria

Check My Links

Check My Links is a handy tool for web designers, developers, and content editors that quickly crawls through a webpage and checks for broken links. This extension allows you to easily check the links on a web page and identify which ones are valid and which ones are broken. With its simple and efficient functionality, Check My Links makes it easy to ensure that all the links on your web page are working properly.

Devo

Devo is a browser extension that provides developers with quick access to the latest trends and news from popular platforms such as GitHub Trending, Hacker News, Product Hunt, Designer News, DEV Community, and Lobste.rs.

Devo is not responsible for the data displayed, it just organizes it to allow developers to reach these platforms quickly without having to navigate to each one separately. With Devo, developers can stay informed on the latest trends and news in the industry, all in one place.

Daily

daily.dev is an online community for developers that provides them with a one-stop-shop for all their developer news needs. It is a browser extension that collects high-quality articles from over 400 sources, saving developers time and effort from searching for them.

With daily.dev, developers can stay up-to-date on the latest news in the industry with zero effort. This extension is free, does not require a sign-up, is open-source and has an active developer community. By installing daily.dev, developers can easily access the latest and most relevant news in their field, all in one place, by simply opening a new tab.

User JavaScript and CSS

With the use of “User JavaScript and CSS” extension, you can easily inject your own JavaScript or CSS rules into any website.

These simple extensions offer a variety of features, such as instant execution, the ability to include custom libraries, and URL masking, which allows you to use a single script or CSS on multiple pages.

Wrapping Up!

I hope I have introduced you to all the useful extension which can be used for web-debvelopment and other purposes. Now it’s your turn to try out all the listed chrome browser extensions and let me know if it eases your work or increases your productivity.

Feel free to chime in the comment section if you have some more extension to be added in the post. I might have missed few despite of having all extensive list of chrome browser extension above. Do follow on linkedin, twitter for any help or query.

Linkedin: https://linkedin.com/in/arki7n

Twitter: https://twitter.com/arki7n