If you’re a web developer chances are you’re familiar with Google Chrome. It’s one of the most popular and reliable browsers with around 2.65 billion internet users to date! Chrome’s biggest selling point is its smooth integration with other Google apps, making it a top pick for online workplaces.
Now you probably already have a couple of favourite Chrome extensions, whether that’s at your web development job or just during general browsing. There might be some overlap, but my hope is that with this list, you’ll discover a few more gems to add to your toolbar.
...
1. Web Developer
First up we have the Web Developer extension. This tool is like a pocket knife, there’s a bunch of different things you can do with it. After you install this tool to the Google Chrome toolbar, you’ll get access to a bunch of different web developer tools. Some of the most used ones include Clear Session Cookies, Display element Information, Display Image File Sizes, Display Topographic Information, and Edit CSS.
With these handy tools, you can inspect elements and start debugging your website(s). And one great thing about the extension is that you can run it across all popular browsers (Firefox, Opera, etc.) and on whatever operating system you’re using. This means if you love it, you can use it to debug and inspect everywhere. Shout out to Chris Pederick who put it together! From what it looks like, he plans to add a bunch of other tools to the extension so I’m really looking forward to when those features get added. It’ll certainly make this tool a definite must-have. If you want to find out more you can head over to his site and check out the source code and a full list of the features.
2. Wappalyzer
Are you curious about what makes a website tick? Well, with the Wappalyzer chrome web developer tool you can find out all the technologies a website is using at a glance. Use it for inspiration or competitor analysis.
Personally, I’m always curious about what technologies my favourite websites are utilising. And Wappalyzer makes it easy to quickly check while browsing. With it, you can see which JavaScript libraries the site is using as well as the e-commerce platform, the CMS, Analytics, frameworks, PaaS, and a bunch of other web info. There’s no signup, no details required with the free version, just install and head over to any website you’re curious about. The extension offers a pro version but I think it just provides contact information related to the company (I haven’t signed up for it). That’s basically all there is to this extension but if you want to learn more click here.
3. WhatFont (Font)
WhatFont (not to be confused with What Font) is a really popular chrome developer tool used to identify what fonts are on a webpage. Basically, a shortcut so you don’t have to inspect each element.
Install the extension, click the icon, and hover over any font and the tool will tell you its name. If you click the font, it’ll display a small window with font size, weight, family, style, line height, and colour. You can use the tool to collect samples from the web or simply answer those questions that keep you awake at night.
This extension was created by Chengyin Liu, a software developer at Airbnb, so you know it’s good. This is the font extension you won’t need until you need it.
4. Eye Dropper
Just like with website fonts, at some point in time yore going to want to know what colour codes display on a web page. Instead of messing around with inspect or diving into brand guidelines (if they exist at all!), you can use this handy little Chrome extension.
With Eye Dropper, you can hover over a webpage and identify specific colours. If you click on the colour it’ll copy to a clipboard so you can easily access it. You’ll be able to see the RGB values and the hex values and even access your history with the tool which is handy if you can't recall that webpage you were admiring.
I don’t know how much of a fan of colours you are, but there are a few other features within the extension you can use to dive into the CSS of the webpage. Eye Dropper is available for Chromium as well (yay privacy!).
5. Window Resizer
As the name suggests, this particular Chrome developer tool resizes screens so you can emulate various screen resolutions to test your website(s). It’s the most popular resizer extension with over half a million users.
Once you install the tool there will be a drop-down with the different options for device screen dimensions. It will automatically resize your screen to the selected size. You can customise the device list to suit whatever tech you’re testing your webpage on. You can open the extension as a popup which saves a lot of hassle cause you don’t have to keep selecting the toolbar.
You’ve also got a live window measurer so when you manually adjust the screen size you know what dimensions you’re working with. Plus there’s a rotate function so you can see what side-view looks like and cover all your angles and variations.
6. CSS Viewer
The CSS viewer. It’s a simple CSS property viewer. What else needs to be said? This tool is a handy way to quickly identify the key CSS properties on a webpage.
Selecting the tool triggers a small popup window that shows you the data wherever you hover your mouse.The tool is open source so you can find the source code on GitHub, and of course, it’s free.
In terms of privacy, the CSS viewer does require access to your history and web data — but luckily for you, it doesn’t collect or transmit any private data, so don’t worry about that freaky stash, you weirdo.
7. Clear Cache
From the mind of Benjamin Bojko comes the easiest way to clear your cache, Clear Cache. With a single click of a button, all your browsing data will be gone forever!
No confirmation dialogs, no popups or anything else slowing down your clearing process. It just takes one a click. You can also customise how much data gets cleared from the following places: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords, and WebSQL.
You might hate cookies, but some are helpful for certain frequented domains — you can also customise what domain cookies are deleted and which are left uneaten. Stupid joke, I know.
8. EditThisCookie
Another hugely popular chrome developer tool is EditThisCookie. With this cookie manager, you can do whatever you want with cookies. You can add, edit, delete, search, block, set expiration dates, and so on!
Aside from basic cookie editing functionality, you can also bulk edit which is a huge time-saver. For the multi-lingual, this extension is available in over 20 languages so you can match it to your preferred tongue. And this tool is open source, which we all love.
9. Marker.io
Marker.io is a handy web developer tool designed to make bug reporting on web pages quicker and more visual. You can easily capture screenshots and utilise editing features to clearly outline where and what the bug is.
What’s great about this extension is that it can integrate with most of the project management tools you probably use at work like, Trello, Jira, GitHub, Asana, plus a few others. Once you’ve highlighted the issue you can create a ticket straight from the extension without leaving the site or switching between apps.
Unfortunately, this extension is a paid one. Plans start at $49 a month (though there is a trial). If you’re going to be using it for work, you could hopefully get your employer to cover the cost. Alternatively, for a free tool, I like to use Lightshot Screenshot because I can use it across any application on my computer and it’s not tied to my browser.
10. Octotree - GitHub code tree
If you’re using GitHub (and who isn’t?) Octotree is designed to enhance your GitHub experience. There’s a free version and a pro version. With the free version, you’ll be able to dive deeper into code review and exploration on GitHub.
Features include quick file search, Fast IDE-like code tree, Support GitHub themes, Support private repositories, Omni bookmarking, High performance, working with repositories of any size.
I won’t go into the pro version, but if you’re interested in taking advantage of all the features head over to their website and you can see for yourself. Privacy is number one with Octotree, no BS, your data is not shared.
11. React Developer Tools
React Developer Tools is one of the most popular framework tools. This extension is used for debugging applications using the React framework. After you install the tool you’ll be able to inspect the React component hierarchies in the Chrome developer tools.
The extension works on Chrome, Firefox, and Edge, so you’ve got a few browser options to choose from. It’s a super handy tool for React developers. If you want to familiarise yourself with all the features, this tutorial will get you up to speed quickly.
12. Vue.js Devtools
Svelte might not be the most popular JavaScript framework, but when we look at the State of JavaScript Survey 2020 we can see this framework is held in very high regard in terms of developer satisfaction. So I thought I’d add the Svelte Devtools extension alongside React and Vue.
This has many of the same basic functions as the other dev tools and is used for debugging Svelte applications. With it, you can inspect the Svelte state and component hierarchies in the Chrome Developer Tools.
13. Svelte Devtools
Svelte is not the most popular JavaScript framework, but when we look at the State of JavaScript Survey 2020 we can see this framework is held in very high regard. So I thought I’d add the Svelte Devtools extension alongside React and Vue.
It has the same basic function as the other dev tools, it’s used for debugging Svelte applications. With it, you can inspect the Svelte state and component hierarchies in the Chrome Developer Tools.
14. DailyDev
I don’t know if this would really be considered a development tool, but it certainly is for developers, so I’ve included it anyway. DailyDev curates articles and news from over 400+ sources on the web all in one handy place.
It links up with your Google account and with a click of a button, it becomes your Chrome homepage (don’t worry you own and control your own data). Meaning whenever you open a new tab you’ll see what’s trending in the news and what fellow devs are reading! You can still add all your most visited sites to have a homepage you’re semi-familar with.
What’s cool about DailyDev is that you can follow the topics that interest you and quickly access any new content related to it. Plus you can comment, upvote the articles you like most and bookmark posts to read later on.
Bonus: Color Tab
I added this extension just for fun! I really don’t know why it’s categorised as a developer tool but it’s a win for me. The Color Tab is incredibly simple. Whenever you open a new tab, a beautiful colour palette will appear…
Look, it’s cute don’t judge. It calms me down between each new task, and it’s far nicer to see than the Google homepage.
If you want to customise the colour palette, head over to the color hunt website and pick something that suits your fancy.
...
Hopefully, you’ve discovered something new after reading about these top dev tools. If you think I’m missing anything or if you’ve discovered a really great tool you think should be on this list, leave a comment and I’ll check it out.
Thank for reading! 🙏
