13 of our favourite Chrome extensions

A trusty tool of any Web Developer, browser extensions are now a key component of our workflows, offering extended functionality to the already powerful modern browser dev tools. The ability to test concepts and fiddle with the DOM directly in the browser rather than switching back and forth from an IDE can be a big time-saver, and debugging relevant data about your site performance or third party plugins can offer insights that might otherwise be missed. There are hundreds of useful add-ons targeting inline css, grid layout overlays, cache-clearing, code parsers etc…

Google Chrome in particular has an excellent eco-system surrounding it with great support from the OSS community, and many extensions provide their source code freely on GitHub. Google have provided clear, accessible documentation and the code behind the Chrome integration is fairly vanilla javascript which lowers the entry barrier. This all makes it quite easy to create your own extensions if you happen to spot a niche or have a specific dev need currently unfulfilled by the market.

With that in mind, here are a few of Pixel Pixel’s favourites:

• ‘User CSS’
  This extension gets used an awful lot. It acts as a new high-level stylesheet for adding test styling, with the changes visible in the DOM, and it caches your changes so they can be persistent across tabs/reloads. The UI is an attractive slide-in drawer with two colour options and can be made semi-transparent.
• ‘Web Developer’
  A jack-of-all-trades extension, this is an incredibly useful tool for a variety of purposes. It takes the form of a drop-down, tabbed menu with a real mix of applicable tools. Deleting cookies, disabling javascript, displaying meta information, and more… This is clearly a personal labour of love according to the author’s day-to-day needs, and it shows.
• ‘Page Load Speed’
  Performance tool which measures the page load and displays a nice visual reference in the toolbar. It provides only a fairly simple breakdown of performance costs so best to use a more advanced tool for getting the breakdown on where your page is being held up. However, this is great for giving a quick, clear idea of page speed on every page you visit.
• ‘YSlow’
  The bigger brother of the above. While Page Load Speed gives you a nice visual prompt as to your page load performance, YSlow provides a more in-depth analysis of what is holding you up. The extension pops open a sub-window and invites you to run a performance test. This grades various aspects of your site on their performance, including http requests, compression, js/css etc. Handy also for viewing the size of the components that are pulled into your page. Specific culprits? Large js libraries…
• ‘Emmett Re:view’
  Useful for Responsive Design testing, this extension provides a number of views within one page to allow testing across multiple device sizes simultaneously rather than one by one. This is obviously great for comparison purposes and ensuring visual consistency. Provides options to use predefined device sizes (e.g. iPhone, iPad, Nexus etc.) or can scrape the user defined media query breakpoints from within your stylesheets. The only issue is that it is a big of a resource hog…
• ‘SEO Meta in 1 Click’
  SEO assessment tool. This provides a drop-down, tabbed view separated into clear and obvious sections like ‘Headings’, ‘Social’ etc. These offer criticisms from an SEO best practices perspective, and focus on your markup – numbers of heading tags and missing meta information for example. Be aware though that this has not been updated since August ’15 and could well begin to differ from the official, ever-changing SEO best practices.
• ‘CSS Diff’
  This is a nice little add-on to for the dev tools which allows the user to compare the CSS attributes from two different elements, displaying them next to each other for immediate visual comparison. A nice touch is that you can compare elements from two different tabs. So you can easily check why your widget doesn’t look quite right when the one on your mate’s site does. Unfortunately, it does suffer from visibility issues when using some dark themes, so could have used some customisation options.
• ‘1Password’
  Duh. Great integration for mac users, nice interface, never go back.
• ‘Full Page Screen Capture’
  Really nice screenshot tool. This captures the whole page rather than just the area visible in the viewport, and doesn’t include the browser so no need for cropping afterwards!
• ‘Clear Cache’
  The name gives it away but this does exactly what it says on the tin. Works great for what it does, and as a bonus provides a detailed options page which allows you to specify just what you want to delete. Cookies, downloads, form data etc.
• ‘BrowserStack’
  Technically this isn’t really a proper extension as it simply opens a new tab to the Browserstack website. However, it does open said tab directly onto the current page via whichever browser you pick from the extension dropdown, which saves the hassle of opening and navigating through the main website.
• ‘Google Tag Assistant’
  Nice little tool from Google to help debug your GTM tags. Similar to the debug mode within Google Tag Manager itself, this lets you see at a glance which tags are on each page and pick out any errors. Recording allows you to track a typical user journey through your site and identify where your tag tracking plan is perhaps lacking. Unfortunately, at the time of writing this extension hadn’t been updated for over a year and was in danger of falling behind the changes to how GTM works.
• ‘Google Analytics debugger’ + ‘Google Page Analytics’
  I’m going to cheat here and suggest a double-whammy of Analytics goodness. Switch both of these on if you need to track or debug your Analytics implementation for specific pages. The debugger will start printing Analytics information directly into your browsers’ javascript console and will let you see at a glance your tags being created as well as various tracking data. Meanwhile Page Analytics adds a toolbar at the top of the screen showing graphs for a range of values including bounce rate and page views. Handily it will also add tooltips to links on the page, showing the percentage of users who clicked through. Very handy for seeing if your user journey is actually what you want it to be!

These aren’t strictly extensions, but honourable mentions go to these three Chrome apps…

• ‘Boxy SVG’
  As an image suite this is obviously nothing compared to a CC product, but for messing around with simple SVGs, or if you don’t want to fork out for a premium product, then this is ideal. The app provides a surprising number of features and has decent performance. Recommended.
• ‘Color Picker’
  Love this app. Great little colour tool to run in the background and tab to when you need to translate a hex code or to identify a colour. Resource-light and has a nice, simple interface.
• ‘Postman’
  Very popular app for testing APIs and doesn’t need me to evangelize for it. Extremely useful for playing with REST, JSON etc. and the UI is clear and pleasing to use. Has a companion extension called Interceptor.

This was really just a drop in the ocean of what’s available out there, but we hope that these examples will get you interested in the browser ecosystem and furiously coding away. But if not, why not talk to us about some friendly design and development assistance?

By: Chris Snowden