12 Extensions and Apps that Fill the Gaps in Chrome DevTools

chrome_gap_header

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

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

LiveReload

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

Browserstack Local & Browserstack Service

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!

gqFjjNiKvY

Awesome Screenshot

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.

awesomescreenshot

JunkFill

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.

xIA4CBlFSo

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

ColorPick Eyedropper

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.

noA1IMIYen

Edge Ruler

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.

v3hqnHWp0C

Devtools Terminal

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.

d2DuAmSZEA

JSONView

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.

kBzQvtqwIa

Postman – REST Client

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.

7tNQwWqWEq

Web Developer Checklist

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.

webdev_checklist

Accessibility Developer Tools

Target v. National Federation of the Blind! 6 million dollars! Boom! Enough said. Do accessibility audits!

VCNz3XJzg2

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.

codesniffer

Additional Extensions and Applications

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.

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!

Comments

  • Patrick Denny

    If you do more with analytics than just plunking in GA and walking away, then WASP.inspector is a really good tool for debugging tricky DI implementations. It also has a really nice visualization of lazy-loading code interactions.

    https://chrome.google.com/webstore/detail/waspinspector-analytics-s/niaoghengfohplclhbjnjheodgkejpih?hl=en

    (full disclosure, I’m the lead developer)

  • Patrick Denny

    If you do more with analytics than just plunking in GA and walking away, then WASP.inspector is a really good tool for debugging tricky DI implementations. It also has a really nice visualization of lazy-loading code interactions.

    https://chrome.google.com/webstore/detail/waspinspector-analytics-s/niaoghengfohplclhbjnjheodgkejpih?hl=en

    (full disclosure, I’m the lead developer)

  • cristicitea

    maybe this one as well, https://chrome.google.com/webstore/detail/servephp/mnpikomdchjhkhbhmbboehfdjkobbfpo

    (full disclosure, I’m the lead developer)

  • http://www.liskoanswers.com sirLisko

    What is really missing is an extension like firediff for firefox. https://addons.mozilla.org/en-US/firefox/addon/firediff/
    If someone knows it please let me know, I’d incredibly thankful :)

    • Konrad Dzwinel
      • http://sirlisko.com Luca Lischetti

        Not bad, even if I’d rather have a resume of the changes and not a list of every single event (that I’ve also to expand to check the change).
        By the way chrome already include a similar thing in the source tab, right click on the file and then ‘local modification’.

        • http://plus.google.com/+KonradDzwinel Konrad Dzwinel

          These two are a bit different. ‘Local modifications’ are changes that you made to the stylesheet/html/javascript manually. DOMListener helps you understand how app/website works by listening to all changes that said app/website makes itself. Combined, these two tools can replace firediff extension that you mentioned.

          • http://sirlisko.com Luca Lischetti

            Ah yes, I didn’t think about that aspect. The problem (for me) is still the output, I’d love to have a kind of summary.

      • http://sirlisko.com Luca Lischetti

        Not bad, even if I’d rather have a resume of the changes and not a list of every single event (that I’ve also to expand to check the change).
        By the way chrome already include a similar thing in the source tab, right click on the file and then ‘local modification’.

        • http://plus.google.com/+KonradDzwinel Konrad Dzwinel

          These two are a bit different. ‘Local modifications’ are changes that you made to the stylesheet/html/javascript manually. DOMListener helps you understand how app/website works by listening to all changes that said app/website makes itself. Combined, these two tools can replace firediff extension that you mentioned.

          • http://sirlisko.com Luca Lischetti

            Ah yes, I didn’t think about that aspect. The problem (for me) is still the output, I’d love to have a kind of summary.

          • http://plus.google.com/+KonradDzwinel Konrad Dzwinel

            You should be able to do it quite easily yourself:

            – hook up a MutationObserver to your page
            – gather information about all changes
            – output them to the console (you can format output nicely using e.g. console.table or console.group)

            You don’t have to create an extension if you don’t want to, you can create a snippet and keep it in the DevTools (Sources>Snippets).

            For more clues see https://developer.mozilla.org/en/docs/Web/API/MutationObserver and code of my extension https://github.com/kdzwinel/DOMListenerExtension/blob/master/DOMListener.js (it’s just 100 lines of code). Good luck!

          • http://sirlisko.com Luca Lischetti

            That’s cool, I’ll give a look. Thanks dude ;)

  • https://stackoverflow.com/users/190695/nirmal-patel Nirmal

    Excellent write up with some of my already favourite tools.
    A question, what do you use to create those screencasts?

  • Konrad Dzwinel

    There is a pretty awesome official gallery of DevTools Extensions: https://developer.chrome.com/devtools/docs/extensions-gallery .

  • http://nicholascloud.com/ Nicholas Cloud

    I use the Dev HTTP Client (DHC) extension for JSON endpoints. It has a nice, full interface and lets you save sessions. Very handy. https://chrome.google.com/webstore/detail/dhc-rest-http-api-client/aejoelaoggembcahagimdiliamlcdmfm

  • Pingback: Today’s Readings | Aaron T. Grogg()

  • http://www.best-pestcontrol.co.uk/ Frank

    I guess you mention most of the commonly use devtools.

  • Blake West

    I really like ng-inspector as a way to view current scope vars. It updates automatically, and has a solid layout. https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=en