Web

4 Extensions and Apps that Fill the Gaps in Chrome DevTools

by Cody Lindley on September 03, 2014 | 10 Game-Changing Features in Visual Studio 2013 for the ASP.NET Developer


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.

Getting Good With The Chrome DevTools

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 YouTubeSome 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). devtools_settings[2]

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.

I’m a Chrome DevTools Whiz But Something Is Missing.

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!).

Note: ext = Chrome Extension and app = Chrome Application

  • Productivity
  • Validators

Window Resizer

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).

resizer[1]

Conclusion

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!

 


Cody Lindley

Front-end developer, Developer Advocate for Telerik

Cody Lindley is a front-end developer working as a developer advocate for Telerik focused on the Kendo UI tools. He lives in Boise, ID with his wife and three children. You can read more about Cody on his site or follow him on Twitter at @codylindley.

More from Cody Lindley
All articles

Follow us