Best Chrome extensions for web developers
Chrome revolutionized the way to extend browsers with new features. Back in the day, extensions were annoying toolbars (remember the Ask toolbar?) and related spam-like additions. Today, I couldn't live without extensions. Here's a list of our favorite extensions used while developing elmah.io.
Let's jump right into the extensions. All extensions are sorted alphabetically so make sure to go through the entire list for the best extensions for Chrome (and mostly Edge too).
1Password – Password Manager
Let's face it. Everyone needs a password manager. Re-using passwords is a thing of the past. 1Password is a good option for a password manager that works across platforms.
Allow CORS: Access-Control-Allow-Origin
We have all been there. CORS errors when developing against a remote service or even a local endpoint. With the Allow CORS extension, you can easily add
Access-Control-Allow-Origin: * response headers without having to modify any code.
Awesome Screenshot and Screen RecorderI often need to take browser screenshots when talking with customers and producing content for the elmah.io documentation site. My favorite extension is Awesome Screenshot and Screen Recorder. The extension offers a lot of features that make the PrtSc button obsolete.
BuiltWith Technology Profiler
I'm curious by nature. When visiting sites I often think about how the developers made them and which technologies they use. There is a range of extensions that can show some of that. I found the BuiltWith Technology Profiler shows me some of the things I'm interested in.
Dark Screen of Death
ASP.NET Core comes with dark mode for the developer exception page - aka the White Screen of Death. I prefer the colors provided by our extension Dark Screen of Death plus the ability to easily switch the theme directly on the exception page.
Monitor your websites➡️ Reduce errors by 90% with elmah.io centralized error logging and uptime monitoring ⬅️
While cookies may soon be a thing of the past, we still rely on a couple of cookies. Using the EditThisCookie extension you can easily modify cookies and even add new ones. This is great for developing without having to reload the website etc.
Grammarly: Grammar Checker and Writing App
Being a non-English speaker I heavily rely on tools to ensure that I don't write gibberish. Grammarly is, without comparison, the best grammar checker extension out there. It integrates into all kinds of in-browser editors and offers a quick link button directly to Grammarly's website for grammar-checking anything.
JSON is such an integrated part of developing modern websites. While there are many good JSON validators and formatters out there (like our JSON Formatter), having formatting, syntax highlighting, and validation directly in the browser is a must. JSONVue is the best option for Chrome IMO.
Screencastify - Screen Video Recorder
While Awesome Screenshot and Screen Recorder also support screen recording, I prefer Screencastify for screen recording. One of many nice features of Screencastify is that it provides a public link to a recorded video for easy share with other people. It also integrates directly with Google Drive to store all videos automatically on your drive.
We are currently migrating the elmah.io app to Vue.js. We have found that the Vue.js devtools extension offers a great set of helpers in this process. This is a must when developing Vue.js applications.
WAVE Evaluation Tool
Web accessibility is an often forgotten practice when developing web applications. The WAVE extension makes it a lot easier by providing feedback directly on the website by injecting colors and icons. It's easy to forget how many people struggle with color blindness or similar. And minor changes in your UI can make a huge difference.
You probably already know the Lighthouse tab built into Developer Tools in Chrome. webhint is a similar extension that scans your web pages and tells you what to fix. There's an overlap between Lighthouse and webhint but I found that webhint does provide recommendations that Lighthouse doesn't and vice versa.
Testing your website on various screen sizes is probably something you are doing already. Chrome's Developer Tools has support for this as well, but I found Window Resizer to be a bit better. It supports a range of easily accessible screen resolutions and even provides hotkeys.
I don't often need to consume WSDL-based services. But when I do, I use the Wizdler extension. The extension scans WSDL files and provides a popup that can be used to easily invoke each endpoint. It's a bit like a simplified Soap UI but for the browser.
Much like JSON, XML isn't supported in Chrome natively (at least not very well). XML Tree is the best extension I have found so far to format and highlight XML files.
elmah.io: Error logging and Uptime Monitoring for your web apps