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).
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.
Link: https://chrome.google.com/webstore/detail/1password-–-password-mana/aeblfdkhhhdcdjpifhhbdiojplfjncoa
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.
Link: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf
I 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.Link: https://chrome.google.com/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj
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.
Link: https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn
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.
Link: https://chrome.google.com/webstore/detail/dark-screen-of-death/mgjlgekjoadppmakbgjkpmplgpplhejj
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.
Link: https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg
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.
Link: https://chrome.google.com/webstore/detail/grammarly-grammar-checker/kbfnbcaeplbcioakkpcpgfkobkghlhen
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.
Link: https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc
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.
Link: https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn
This extension helps you to inject plain JavaScript and CSS code or even libraries from CDN into webpages using URL rules. It can be used in development by testing new code, adding new features to the existing code, manipulating the Document Object Model (DOM), or changing the stylesheet. It also provides a backup (import/export) for all the websites added.
Link: https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
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.
Link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
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.
Link: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
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.
Link: https://chrome.google.com/webstore/detail/webhint/gccemnpihkbgkdmoogenkbkckppadcag
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.
Link: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
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.
Link: https://chrome.google.com/webstore/detail/wizdler/oebpmncolmhiapingjaagmapififiakb
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.
Link: https://chrome.google.com/webstore/detail/xml-tree/gbammbheopgpmaagmckhpjbfgdfkpadb