Do a search online for “must have chrome extensions/applications” or “top XX chrome extensions/applications” for front-end developers and you will most certainly find several cliche articles containing a random curated list of extensions/applications. It is pretty much what you might expect to find. I am not going to write one of those articles. What follows, I hope, is more useful and insightful than that.
In this article we’ll examine twelve or so Chrome extensions/applications (mostly extracted from this developer survey) that will fill a few of the gaps left behind by the Devtools. Of course in order to realize the gaps left behind by the Devtools, a developer must first acquire an in depth working knowledge of the DevTools themselves. So, let’s talk about getting good with DevTools first before we talk about extending Chrome with front-end development aids.
The Chrome developer tools provide a rich set of tools for doing web development. Hopefully, minimally, you already knew this. If not, well you’re still reading the right article, read on.
To gain a comprehensive working knowledge of the Devtools, one should start by reading the documents provided by Google. This recommendation might bestow upon me the “Captain Obvious” crown, but seriously, read the docs! If you have tried reading them in the past and have felt they were lacking, try again. Much has improved. By stopping now and taking the time to read the docs carefully, in depth, and with the necessary focus to fully grokk the Devtools I am certain that you will avoid installing extensions and apps that are inferior to the DevTools and duplicate functionality already provided.
Once you have gotten your fill of the official docs, the next best place to turn for learning would be video training. Watch the free “Discover-DevTools” course provided by codeschool.com. Or, if you are a high roller, drop da bling on the “Using The Chrome Developer Tools” course by Pluralsight. It’s good.
If formal video training isn’t your thing, you can always watch whatever filters to the top on YouTube. Some high quality insights from several developer conferences can be found on YouTube regarding Devtools.
If watching a video is mind bogglingly slow in comparison to your cheeta like reading skills? You can always piece together a selection of DevTools articles from HTML5 Rocks to gain insight into the Devtools not found in the docs.
Don’t enjoy reading or watching when learning new technologies? At the very least, make sure you open up the DevTools and play with them like a 3 year old child plays with power windows. Just make sure to roll the window up and down enough to thoroughly understand everything that is provided by the DevTools.
My parting advice for getting good with the DevTools is to open the Settings UI in Devtools and acquaint yourself with each and every setting (protip: make sure “Disable cache while Devtools is open” is checked).
Make sure you know the when’s and the why’s of the DevTools settings. It’s just a fact that a keen awareness of what is provided in DevTools Settings can eliminate the false necessity found in a great deal of Chrome extensions you might otherwise be tempted to install.
Now that you are a DevTools whiz, let’s discuss augmenting Chrome for front-end development where the DevTools and Chrome itself come up short.
With a scholarly understanding of DevTools completed (DO IT!), let’s turn to a small list of extensions and applications that a front-end developer might install to augment the DevTools and Chrome. Throughout much of the remainder of this article, I will examine each of the Chrome enhancements listed below and offer my subjective spiel for each with words and motion (Animated Micro ScreenCasts Gifs, FTW!).
The LiveReload application (install on your OS) monitors specifically identified folder and files for changes. When something changes, it can optionally be preprocessed as needed and then an unfocused browser window which has these files loaded can be reloaded . It saves on development time because there’s no need to leave your text editor to reload a browser. The application works in conjunction with the LiveReload Chrome extension to make all this goodness possible.
Testing code in multiple browsers on multiple OS’s and devices is a necessity for front-end developers. Browserstack has made this so simple these days that I’ve pretty much given up on virtual OS’s in favor of using Browserstack. With a Browserstack account and the Browserstack Local extension my localhost is easily testable on an insane number of platforms, devices, and browsers. And all of this occurs in a browser tab! If you can’t tell, I detest leaving the focus of either my text editor or browser window for any reason whatsoever!
Awesome Screenshot rises above all the rest for a screen capturing solution in a browser. In short, it’s simple, it can capture an entire web page (scroll and all), and it provides the ability to annotate screenshots and then quickly share the results on web. Did I mention that it’s free and you can draw happy faces on your screenshots fairly easily.
This simple extension has saved me hours. Imagine you are developing a lengthy form interface which takes days, if not weeks, to get just right. Imagine most of the fields are required for the form to be submitted (you validate on the client, right!) but you need to submit the form over and over and over again during development. The ability to push a button and fill out all of the required form fields on a webpage with dummy data is priceless! That’s what JunkFill does and it does it well.
I wouldn’t look to the Window Resizer extension for doing development on specific devices for a specific screen resolution. Instead, consider it a quick and dirty way to resize the screen in a pinch. For mobile focused development, make sure you are using the Mobile emulation provided by the DevTools (Pro Tip: Checkout the advancements for doing emulation in DevTools Canary).
It’s a common requirement for front-end developers to be able to extract color values from a web page. We do it all the time, or at least I do, since I’ve yet to memorize the entire set of hexadecimal colors. The ColorPick Eyedropper will give you the hexadecimal and RBG values for any pixel you can point and click on.
Until I found the Edge Ruler Chrome application, I was still using the old OS X Free Ruler program because it didn’t confine me to the context of the browser viewport for measuring. A gaggle of these ruler extensions exist as extensions but given the Edge Ruler is a Chrome application, it’s not confined to the browser window.
My brain can only seem to develop front-end code in two windows efficiently. A text editor window and a browser window. The terminal means switching to a third window. By using the DevTools Terminal, a third OS window is not generally needed. The terminal becomes integrated into the browser as well as the Chrome Devtools UI. Note that getting this extension up and running does require admin control over one’s computer and the desire to install Node.js.
I’m a little surprised this isn’t just a feature built into Chrome. The JSONView extension makes the viewing and reading of JSON structures sane when loading a JSON response in the browser.
Testing and debugging a restful API during development by loading each HTTP request individual from the URL bar would be laborious and a waste of time. What is needed is a tool for manually constructing and storing HTTP requests with precision and then examining both the request and the results in depth. This is what Postman can do for you.
Automated analyses of common violations that occur during front-end development are helpful. The web developer checklist examines a web page and reports on best practice violations. Mileage may vary, however I’ve found this tool to be a helpful sanity check to remind me of things that I know I should do but often forget to put into place before going to production.
Target v. National Federation of the Blind! 6 million dollars! Boom! Enough said. Do accessibility audits!
The Accessibility Developer Tools is a good start and integrates into the developer tools nicely. However, it’s more of a quick and dirty audit that should lead you to a more robust tool like the HTML_CodeSniffer bookmarklets. Don’t forget you can add bookmarklets as snippets in DevTools.
All of the Chrome extensions and applications mentioned thus far will likely appeal to any front-end developer. But not all front-end development is of one nature and some extensions are narrowly crafted for a specific type of front-end development. For this reason, I’ve created a small list of narrowly targeted Chrome extensions that might or might not be useful to you, depending on the type of development you do. Examine the list below and see if one of these could help with your development flavor.
In this article, I first and foremost hope that I’ve made it emphatically clear that you need to become a Devtools aficionado, and secondly, a connoisseur of Chrome extensions and applications.
Before you run out and start installing the short list of extensions and applications I’ve highlighted in this article, I’d like to suggest switching to Chrome Canary for development if you have not already done so. Having the latest and greatest as soon as you can has it’s benefits, but be aware Canary can “sometimes break down completely”. However, getting ahold of the latest advancements being made in regards to the Devtools, in my experience, has been worth the risk. In other words, the DevTools bleeding edge will often contain helpful solutions you need today.
As always, If you think I’ve missed a monumental application or extension critical to front-end development, please share them in the comments with details on why you think it’s important. Consider before commenting however, that if I didn’t mention a particular extension, it’s likely the case DevTools already contains aspects of the extensions functionality. You’ll just need to go and discover it!