Optimize Your Coding: Top 20 Browser Extensions for Web Developers
In this article, we will look at 20 different browser extensions that can be useful to web developers in 2024. All of these extensions are available for Google Chrome, but most are also available in Firefox and other browsers.
This isn’t in any particular order and there’s no ranking involved. I’m also leaving off extensions like the React and Vue devtools, Clockwork for Laravel, and other framework-specific extensions because I want this list to be more general and not just for one specific framework or language. Since HTML, CSS and JS are the core of frontend web development, some of these extensions are geared towards those technologies.
I find browser extensions super useful for 3 major things.
- Getting information from other websites – Code, colors, fonts, technologies, etc. When I create a website or layout, I use a lot of other websites for inspiration. So it’s nice to see what’s going on under the hood.
- Developing, testing, and debugging my own projects – These extensions are very helpful if I need to find broken links, check performance, or test different screen sizes.
- Productivity – I like to quickly fill out forms, save things, take notes, manage my tabs, and other similar tasks. So, there are a few extensions that help with that.
The first few extensions are for getting information from other websites.
1. ColorZilla
ColorZilla is a color picker and gradient generator that you can use to get the color of any pixel on a webpage. This is great for web design because, a lot of the time, when we’re creating layouts, we use other sites for inspiration. So if you see a color you like, you can use ColorZilla to get the hex code quickly. You can click on the color picker and then click anywhere to get that color. You can even use it outside of the browser now, which is really cool. You can even create gradients and save them to your library. So if you’re creating UIs and layouts, this is definitely a must-have.
2. WhatFont
WhatFont is in the same realm as ColorZilla. you may see a font that you really like and wany to use and instead of digging through the sites CSS files, you can just use this extension to find out which font is being used. You can click on the WhatFont icon and then hover over any text on the page to see what font it is. You can also click on the text to get more information like the font size, line height, and color.
3. Wappalyzer
Wappalyzer is a technology profiler that shows you what technologies are being used on a website. So if you’re on a website and you’re curious what it’s built with, you can click on the Wappalyzer icon and it will show you what technologies are being used. So for example, if we go to https://wordpress.org, we can see that it’s built with WordPress, obviously. It will show you programming languages, databases, web servers, frameworks, and more. If we go to https://react.dev, we can see that it’s built with Next.js. My website, https://traversymedia.com uses the Kajabi platform for video and ecommerce, Ruby, Cloudinary for images, some JS libraries, and more. So it’s a cool way to see what’s going on under the hood of a website.
4. Web Developer
Web Developer is a very popular extension that adds a toolbar with various web developer tools. A lot of this stuff is available with the standard devtools in most browsers, but this adds a lot more granularity. You have more cookie and session management. I like that you can quickly disable all JavaScript and CSS styles. You can disable the default browser styles. Edit the CSS files directly in real-time within an efficient layout. You can do all types of stuff with forms like check all checkboxes,convert certain input types to other types, remove validation, display form details and a lot more. For images, you can disable them, make them full size, outline background images, display alt attributes, etc. You can quickly resize the window to specific values. You can validate your HTML, CSS, links and accessibility and so much more. I think it’s worth having installed for any front-end developer.
5. Dark Reader
Dark Reader is a popular extension allowing you to enable dark mode on any website. It’s easier on your eyes and it’s also great for web developers because you can see how your site looks in dark mode. You can enable it on a per-site basis or globally. You can adjust the brightness, contrast, sepia, and more. You can also exclude certain sites if you want. I use this all the time and it’s a must-have for me because I actually have issues with eye floaters and they flare up when I look at bright screens for a long time.
6. JSON Formatter
JSON Formatter is a simple extension that formats JSON data in a more readable way. So if you’re working with APIs and you get a JSON response, it can be hard to read if it’s not formatted. So you can click on the JSON Formatter icon and it will format it for you. You can also collapse and expand objects and arrays. It’s a simple extension but very useful. We still have the option to view the raw data without the formatting as well.
You can try it by installing it and visiting something like https://api.github.com/users or https://jsonplaceholder.typicode.com/posts/1.
7. Session Buddy
Session Buddy is a session manager that allows you to view, save and restore your browser sessions. So if you have a bunch of tabs open and you want to save them for later, you can click on the Session Buddy icon and save them. You can also name the session and add notes. You can then restore them at any time. You can also export and import sessions. I use this all the time because I have a lot of tabs open and I like to save them for later. I also like that you can search through your sessions.
8. Fake Filler
Fake Filler is a form filler that allows you to quickly fill out forms with fake data. So if you’re testing a form or you just want to fill out a form quickly, you can click on the Fake Filler icon and it will fill out the form for you or you can just right-click on a form and select an option from the dropdown. You can also create custom profiles and save them. It’s a very useful extension for testing and productivity. I use it all the time and I’m going to start using it in courses and tutorials because I know you guys don’t like watching me type out dummy data into a form every time we test.
9. Quick Source Viewer
Quick Source Viewer is a simple extension that allows you to view the source code of a webpage in a much more in-depth and organized way. So if you click the icon, you’ll see the source code in a new tab. You can then click on any file to view it. You can also search through the files and view the source code in a tree view.
10. CSS Viewer
CSS Viewer is a simple extension that allows you to view the CSS of any element on a webpage. You can click on the CSS Viewer icon and then hover over any element to see the CSS. You can also click on the element to see more information like the font size, font family, color, and more. You can also click on the CSS to copy it to your clipboard.
11. User-Agent Switcher
User-Agent Switcher allows you to quickly and easily switch between user agents. This is great for testing how your site looks on different devices. You can click on the icon and then choose from a list of user agents. You can also add custom user agents. You can also set up rules to automatically switch user agents based on the URL. This is a must-have for testing responsive design.
12. VisBug
VisBug is a design tool that allows you to make changes to a webpage visually. You can click on the VisBug icon and then click on any element to make changes. You can edit content locally from the regular devtools, but this is a much more efficient way to do it. You can change the text, the color, the size, the position, and more. You can also add new elements, move elements around, and delete elements. You can also view the grid and the spacing. It’s a very powerful tool and it’s great for making quick changes to a webpage without having to go into the code.
13. Daily.dev
Daily.dev is a news aggregator for developers. They have some of the best and most recent articles, tutorials, and news from the web development world. You can click on the Daily.dev icon or just open a new tab and it will show you the latest articles. You can also search for specific topics. You can also save articles for later. I use this all the time to keep up with the latest news and trends in web development.
14. LT Debug
LT Debug is a pretty advanced and in-depth debug and testing tool. You can add/remove headers, block and redirect requests, change user agents, throttle responses, manage CORS and more. Just to give you an example, we can click on “Modify Headers” and give it a rule name,header name and value, apply it to a URL and save. Now when you go to a URL where this rul is applied and open up the devtools, you’ll see the header in the request.
This is very useful when you’re testing APIs and the information you’re sending to the server. There is also a list of all of the rules that you created and you can enable and disable them. There are a lot of other features as well and it’s a very powerful tool.
15. Check My Links
Check My Links is a link checker that allows you to quickly check all of the links on a webpage. You can click on the Check My Links icon and it will show you all of the valid links, valid redirecting links, warnings and invalid links. You can copy the results in CSV format as well. It is very simple, but very helpful.
16. Web Developer Checklist
Web Developer Checklist is a simple extension that gives you a checklist of things to do when developing a website. You can click on the icon and it will show you a list of things to check off. You can also add your own items. It’s a nice way to make sure you’re not missing anything when you’re developing a website. I actually do have a few errors, but in my defense, most have to do with the ecommerce and video platform that I’m using. But it does help you catch things that you might have missed.
17. Click Ups
Click Up is a project management tool that allows you to create tasks, lists, and boards. You can click on the Click Ups icon and it will show you all of your tasks. There are a bunch of features like a notepad, email integration, time tracking, screenshots, and more. You do need to sign up to use it, but it’s free and great for productivity.
18. CheckBot
CheckBot is a website auditor that checks for SEO, speed, security, and more. You can click on the CheckBot icon and it will show you a report of any issues. You can also view the report in a new tab. You can also export the report as a PDF. It’s a very useful tool for making sure your website is up to par. I get 80%, so there are some improvements that I can make. Again, a lot of this stuff goes back to the platform that I’m using. Just sayin 😄.
19. IE Tab
IE Tab is an extension that allows you to view a webpage in Internet Explorer. This is great for testing how your site looks in older versions of IE. Now I know many developers including myself don’t really care about IE anymore, but if you’re working on a project that requires it, this is a great tool. You can click on the IE Tab icon and it will open the current page in IE. You can also add custom URLs to open in IE. You can set up exceptions and there’s a bunch of options including the version of IE.
20. Lorem Ipsum Generator
Lorem Ipsum Generator is a simple extension that allows you to generate lorem ipsum text. You can click on the icon and it will generate as many paragraphs as you want of lorem ipsum text. You can also generate lists, headings, and more. You can also set the length of the text. It’s a simple extension but very useful for testing and productivity. This goes well with the Fake Filler extension.
So that’s it. Those are 20 browser extensions that I think are very helpful and productive for web development. I hope you found something that you like. If you have any extensions that you think should be on this list, let me know in the comments. I’m always looking for new tools to try out. Thanks for reading and I’ll see you in the next one.
