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.
14. Code Cola
Select any element on the page and adjust the styling applied to it with an intuitive interface
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!
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
15. iMacros
Record and replay macros (scripted interactions) within the browser
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.
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 that offer similar functionality for Firefox.
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.
18. JSONView
Applies styling and syntax highlighting to your JSON document
If you're working with HTTP requests returning JSON data, as many developers are 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).
19. ColorZilla
Hugely popular tool that gives you loads of information about the colours on a page
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.
Accessibility – that 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 that 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.
21. Page Ruler
Adds an on-screen ruler to the browser for measuring pixel dimensions
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 there are 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.
22. Open Graph Preview
Control how your site appears when shared on Facebook or other social media sites
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. Subscribe here.
Simon Jones is a technology leader with experience managing product and engineering teams of up to 200 staff, both at startups and large corporates. He is a proficient full-stack developer, in particular with Go & React + TypeScript. He now works at Facebook in London. Formerly CTO at Norwegian VC-backed startup Just, and Engineering Director at Barclays and American Express.
