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…
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’
- ‘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.
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.
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.
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’
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.
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?