20 essential browser extensions for web pros

[Rss Bot 1]

Modern web browsers are tremendously versatile, to a large part by virtue of the wide range of third-party extensions that can be used to add extra features and functionality. 

• 30 Chrome extensions for web designers and devs

Yet extensions are not just about the browsing experience for the end user. Designers and developers have access to a wide and varied range of extensions for just about anything they might want to do. They will help make your life easier and/or improve the quality of your work.

Here, we'll take a look at a small handful of some of the most essential extensions that you need and which can really make a difference. The chances are that you'll be developing primarily with Chrome or Firefox, so we'll focus on extensions which support either or both of these browsers.

01. Web Developer

Web Developer is the Swiss Army knife of developer extensions

• Web Developer: Chrome
• Web Developer: Firefox

Developed originally for Firefox and ported to Chrome (and Opera for that matter), Web Developer is the Swiss Army knife of developer extensions, and neatly complements the built-in developer tools of both browsers.

The extension adds a toolbar with a wealth of useful features, including the ability to extensively inspect the page structure, manage cookies and form content, enable or disable various things like JavaScript and caching, plus CSS styles and much more. It can also check for common issues with pages such as broken images or non-standard code.

One especially useful element is the CSS style inspector; this enables you to hover over any element on the page and see the styles applied to it, which can quickly solve mysterious style behaviour.

This one really is a must-have.

02. DevTools Autosave

Changes made in DevTools are saved to the source files as you make them

• DevTools Autosave: Chrome 

This extension a bit fiddly to set up, but is really useful once you get it running. You can already make changes in Chrome DevTools and see immediately how they reflect on the page. The DevTools Autosave extension, however, enables modifications to be automatically saved back to the source files as you make them. This can be especially useful for CSS tweaks to get your page looking visually spot on.

In addition to installing the extension itself, you need to install and run a server. Instructions on how to do this are available on the extension's GitHub site, which is linked to from its page on the Chrome Store. Once you've got things set up, it can support either local filesystem or server-based development.

03. IE Tab

Test your work in an IE tab

• IE Tab: Chrome 

There are still a significant number of people out there using Internet Explorer, and while these days Microsoft is well-engaged with the web standards community, in the past it's fair to say there was some deviation from the norm when it came to IE's approach to rendering pages.

If you're looking to test your work out in IE, then IE Tab provides a straightforward way of doing so. You also have the option of selecting the standards you want to render with. This means that you can test backwards compatibility with the likes of IE7, which rather remarkably can still turn up in enterprise environments 11 years on.

In the past, IE Tab was also available for Firefox. However, it is unsupported in the latest version of Firefox and it's unclear whether it will receive an update.

04. HTML Validator

A handy alternative to online tools

• HTML Validator: Firefox

It's easy for mistakes to creep into HTML, and there are a number of online tools already available which can validate your page content. If you find it a bit fiddly or time-consuming to get to them, this could be the extension for you. 

The button it adds will fire up a source view of the current page, highlighting and listing any HTML errors or warnings. It's particularly good for catching things like missing end tags, deprecated features and general bad practice. You can also choose between validation algorithms to suit your needs.

Even if you're a seasoned web developer, it can be useful to run your HTML through validation since things can always slip through the net. Of course, passing validation is no guarantee of good HTML, but it does help!

05. User-Agent Switcher

Useful if you've inherited some existing code

• User-Agent Switcher: Chrome 

This one is prone to cause some debate. In an ideal world, your pages shouldn't be checking for user agent (a fancy way of saying browser version, operating system and rendering engine). It's much better to use feature detection (that is, checking ‘does the user's browser support HTML feature X?'), and have your page progressively enhance or degrade gracefully rather than serving up different content to older browsers.

Nonetheless, whether you've inherited some existing code, or have a legitimate need to check user agent in your own code, this extension provides a quick and easy way to switch between them without having to load another browser or power up a different device. 

06. Google PageSpeed Insights

Access PageSpeed Insights with a single click

• Google PageSpeed Insights: Chrome 
• Google PageSpeed Insights: Firefox 

It's worth spending some time optimising the performance of your page, since this can make a subtle yet significant difference to how it is received by users. 

You might already be familiar with PageSpeed Insights, an online service from Google which will evaluate the performance of your site and make a set of often very useful recommendations on how to optimise it. PageSpeed Insights will also highlight optimisation steps you've already taken (sometimes inadvertently!)

This is really a convenience extension which provides a link through to PageSpeed Insights so you can test your page with a single click. It's the same service you get online, but without the need to open up a new tab and navigate to it. The extension itself also provides a performance score before you click through, but really it's the link to the detailed analysis that's useful.

07. BuiltWith Technology Profiler

A one-click way to see under the hood of the page you're viewing

• BuiltWith Technology Profiler: Chrome 
• BuiltWith Technology Profiler: Firefox 

Ever wondered 'how did they do that?' when browsing the web? There are a variety of reasons that it can be useful to understand the technologies and standards that websites are using when you visit them. The BuiltWith extension gives you a one-click way to see under the hood of the page you're viewing.

The tool will give you insight into JavaScript libraries being used, analytics platforms, web standards, frameworks and more. All of the information is delivered in a very readable manner, with straightforward explanations of what each technology or standard is about to save you going off to research them.

Taking a look at what some of the most popular and modern sites out there are using can be a great source of inspiration as you try to keep pace with ever-changing stacks and standards.

08. SEOquake

A detailed breakdown of traffic and ranking statistics

• SEOquake: Chrome 
• SEOquake: Firefox 

It's likely that SEO will be a factor for you when developing a site, and there are a multitude of tools available which can help you maximise your chances of being seen. SEOquake is one of a number of such tools. The extension provides a very detailed breakdown of traffic and ranking statistics, assuming your site is popular enough for them to be calculated. 

Also useful even for smaller sites is the ability to click through to SEOquake's own online diagnostic service, which will provide a number of useful recommendations to ensure your page is findable. It will also examine internal and external links and compare domains and URLs.

By default the extension will also overlay SEO information onto search engine results. However, it's highly configurable, so if this troubles you then you can disable it in the options.

09. Emmet Re:view

Rapidly test out your page on a number of screen sizes side-by-side

• Emmet Re:view: Chrome 

Responsive design is probably at the front of your mind as you work, but testing is not always the easiet stage of development. It can prove to be a real hassle trying to see a site in action on the myriad screens and devices that a site may be viewed on. 

Luckily, Emmet Re:view gives you the ability to rapidly test out your page on a number of screen sizes side-by-side. You can choose between a 'breakpoints view' which shows a view for every CSS breakpoint on the page, and a 'device wall' which mimics popular mobile and tablet devices. The device wall is configurable, with a large list of devices available to mimic.

What's particularly nice is that you can continue to interact with the pages while they are displayed in Emmet Re:view. This gives you the ability to test out form submission, button clicks and much, much more once and see the result across multiple views.

10. PerfectPixel

Overlay a transparent, static image onto a webpage in the browser - useful for matching to a wireframe

• PerfectPixel: Chrome 
• PerfectPixel: Firefox 

PerfectPixel enables you to overlay a static image onto a webpage in the browser, with a degree of transparency so the underlying page can be seen beneath. It's also possible to add multiple overlays if this is needed. 

This can be useful during the development phase as it allows you to match the implementation to a wireframe or template exactly – even a single pixel deviation will become evident, hence the name. It might be particularly useful for team projects where a hand-off takes place between design and developer(s).

Once you've added the overlay, the extension can also scale and move it. Since it's only a static image, it won't of course respond to changes in screen size, so you may want to use multiple overlays to test responsive designs.

Next page: 10 more essential browser extensions for web professionals

11. FireShot

Take full-page screenshots of webpages without any fiddling around

Chrome 

Firefox 

Available for a wide range of browsers, in spite of the name, FireShot fulfils one very simple requirement – it allows you to take full-page screenshots of webpages, without any fiddly scrolling, cropping or trying to stitch together various screenshots with the help of Photoshop. 

You've almost certainly needed to do this at some point, and it's almost bizarre that there wasn't a straightforward way to do so.

While it's an extremely simple extension, there's some flexibility provided – you can choose whether to capture the whole page, only the visible part, or just a selection. 

Once the image is captured, you can choose whether to save it as an image or PDF, email it, copy it to clipboard, or even print it. FireShot is a great example of a simple extension doing what it does very well.

12. Code Cola

Select any element on the page and adjust the styling applied to it with an intuitive interface

Chrome 

Code Cola offers a very intuitive interface to modify page styling within the browser. You can select any element on the page and adjust the styling applied to it by, for example, dragging a slider for opacity or selecting a font from a drop-down. 

It's very powerful, but at the same time offers much better readability than DevTools. Essentially this allows you to take a WYSIWYG approach to styling, which, let's be honest, can be very useful with CSS. Once you've played around with styles to see what works visually, the extension also gives you the ability to copy the code changes so you can retrofit them into your CSS. 

Alternatively, for added power, you could combine this with DevTools Autosave and have the changes automatically saved back to their source files. Just be careful you don't get carried away with experimentation!

13. iMacros

Record and replay macros (scripted interactions) within the browser

Chrome 

Firefox 

The iMacros browser extension is a free, pared-down companion to a commercial product, but nonetheless offers some valuable functionality. As you might expect from the name, iMacros enables you to record and replay macros (scripted interactions) within the browser. It's very easy to do so – simply click Record and then interact with the site as you would normally. When you play back the macro, it'll perform the same steps as quickly as the connection will allow.

While this could be useful for performing repetitive tasks, the real power for developers is as a testing tool. It enables you to very quickly and intuitively set up automated tests which you can run every time you make a change. This can save tremendous effort manually regression-testing pages, without the need to develop a fully fledged automation test suite using something like Selenium.

14. Check My Links

Check whether your links are working

Chrome 

Check My Links will crawl through every link, both internal and external, on your page and check whether it's working. It generates a report as it goes, showing the outcome, and colour-codes good and bad links on the page. This is particularly useful if you have a site with a large number of links to external content, since it can be very hard to know whether they've broken without clicking through every one.

There are a number of configuration options available to modify the HTTP request type, control use of caching, and more. In most cases, however, the out-of-the-box settings should do just what you need. It's worth noting that there are a number of similar extensions which offer similar functionality for Firefox.

15. UX Check

Adds annotations indicating potential UX issues

Chrome 

User experience should always be front of mind when working on the web. There's no substitute for testing with real users, but it can also be helpful to have an expert, 'heuristic' UX evaluation performed on your site. The UX Check extension is designed to make that straightforward.

With UX Check, a UX designer or tester can add annotations to a site highlighting UX issues, and then package these annotations up along with screenshots (which are taken automatically) to send to the designer or developer working on the site. This avoids a lengthy process of stitching together screenshots and comments. 

The UX Check extension encourages the classification of feedback into one of ten different categories based on the '10 Heuristics for User Interface Design' by renowned UX practitioner Jakob Nielsen, although you can customise these categories if you so wish.

16. JSONView

Applies styling and syntax highlighting to your JSON document

Chrome 

Firefox 

If you're working with HTTP requests returning JSON data, as many developers do these days, you may find yourself frustrated by the lack of formatting and syntax highlighting when Chrome and Firefox present JSON to you. Luckily, JSONView comes to the rescue here. When installed, this will apply styling and syntax highlighting to your JSON document, and adds a context menu to grab individual values. This makes for a tremendous improvement in readability, and can make it much easier to spot the data you're looking for, or even errors.

You can also customise the formatting with a built-in style editor, which uses CSS to define the colours and formatting applied.

If you ever work with JSON in the browser, there really isn't a good reason not to install this (or any one of several other similar extensions).

17. ColorZilla

Hugely popular tool that gives you loads of information about the colours on a page

Chrome 

Firefox 

ColorZilla is extremely popular, and it has millions of users for a good reason. Very simply, it gives you a wealth of information about the colours used on a page, which can be useful whether you're taking inspiration from another site you've seen, or picking your own from a palette.

The extension includes not only a very well-designed eye-dropper tool, but also the ability to analyse and highlight all the colours used on a page, plus a set of colour palettes of commonly used colours. It also links through to a handy CSS gradient generator by the same author which can quickly give you the code you need for gradient backgrounds. Try ColorZilla in combination with DevTools Autosave to experiment with colours on your page visually and on-the-fly.

18. AXE

Automatic checking for accessibility problems

Chrome 

Firefox 

Accessibility – this is, ensuring that sites are equally usable by people with disabilities – is important on the web. Yet unfortunately it isn't always front-of-mind for developers, and so testing tools which help ensure the right focus can be extremely valuable.

The aXe extension adds functionality to the browser's Developer Tools which enable you to check for accessibility problems automatically. Not only does this give you the benefit of rapid, automated testing, but one of aXe's strengths is in avoiding false positives, so you know its findings need to be addressed. 

Note that the same is not true in reverse, however – just because aXe finds nothing does not guarantee an accessible page, so there is no substitute for following best practice, and testing as extensively as possible to get the right result.

19. Page Ruler

Adds an on-screen ruler to the browser for measuring pixel dimensions

Chrome 

Page Ruler adds an on-screen ruler to the browser, which enables you to obtain pixel dimensions and positioning for any elements on the page.

While this might sound trivial, it can make a huge difference when you're working with CSS. Want to add a new element to the page, having spent too much time trial-and-erroring the size and positioning? Use the ruler to get the values spot on first time around.

The tool is pretty simple to use and has a couple of different ways in which the ruler can be used Either you can click and drag free-form to outline a region to measure, or if you need to work with existing content on the page, you can enable 'Element mode' on the left of the ruler's toolbar, which will highlight individual elements on the page as the mouse passes over them. Once done, the measurements make an appearance in the toolbar at the top of the page.

20. Open Graph Preview

Control how your site appears when shared on Facebook or other social media sites

Chrome 

Shares on social media are a major source of traffic, but did you know you can control how your site appears when shared on Facebook or other social media sites? The Open Graph protocol is a metadata standard which defines properties read and displayed by social networks. For example, <meta property="og:title" content="My Page"/> controls the title Facebook gives your shared page.

The Open Graph Preview extension allows you to see how your page will appear when shared on Facebook and Twitter (plus a couple of others). Once your site is live, you can also use this extension to see how many times your page has been shared on each of the social networks, which it will display below the appropriate icon.

This article originally appeared in Web Designer magazine issue 264. Buy it here.

Read more:

• 30 Chrome extensions for web designers and devs
• 3 handy Chrome extensions for front-end developers
• 10 top design feedback tools

View the full article