Browser Plugins Are Your Friend3rd October 2015 in Tooling
When you’re searching around on the web, there are certain questions that crop up over and over. “I wonder what font this site has used?” , “What colour is that background?”, “Is this site responsive?”, “What cookies has this site set?”
The answer to all these questions can usually be discovered by searching through the developer tools, but for many of these tasks I like to use plugins. The Chrome Web Store has thousands of extensions (mostly free and rated by users) and you can usually find something that will do almost any task you can think of. Here are some of the ones I use day in, day out.
Whilst working on web designs I often need to check the width and height of different sections on a page. The ruler extension makes this really simple, just click and drag and voila! – there you have it. Another great (but almost hidden feature) in this extension is element mode. When this is switched on, any element you mouseover (such as a p or div) will become highlighted and its width and height displayed on screen.
This extension is incredible useful for finding out which colours have been used in a webpage. Any area you mouseover will show the hex colour code being used (including images) and with a click you can add it to your clipboard. There is also a webpage colour analyser built in, which gives a nice display of all the colours used on a particular page.
This is a simple but really useful extension. Once its enabled, any time you mouseover text on a webpage it will display the font being used. If you click the text, you can also find out what font-size, line-height and font-weight are being applied. Also, as many icons on webpages are font based (such as Font Awesome or Octicons), you can instantly see which icon sets a webpage is using.
In these days of responsive web design, it’s important to see how web pages will look when the size of the viewport changes. Although resizing for different devices is built into Chrome, this plugin has a nicer UI and is really quick and simple to use. You can also add your own custom screen sizes, create your own hotkeys and export your settings into a new browser if needed.
Full Page Screen Capture
There are many times when you need to take a screengrab of an entire web page. Instead of taking multiple screenshots of your monitor and stitching them together, Screen Capture has the option of saving the whole page regardless of how long it is.
If you’re building sites using a CMS, clients often need tutorials in how to use the software. By using ScreenCastify to make quick videos of how things are done, they will have a great resource which they can replay as many times as they like. ScreenCastify lets you record either an active tab in your browser or your entire desktop with a HD resolution of 1280 x 720 @30fps. This extension has a paid version if you need to record videos over 10 minutes long.
This is the Grandaddy of them all. The Numero Uno of developer extensions. There are so many features packed into this extension that any developer or designer should find something they need. Here’s a rundown of just some of the tools Web Developer offers:
- Ability to disable CSS, JS and Popups
- View Alt text on images and display image paths
- Display element details such as IDs and Classes
- Pick colours from the page (including images)
- Display ruler and line guides
- Outline various elements
- View responsive layouts (this is pretty neat as it’s all on one page)
- View cookie information
- Validate HTML and CSS
- Much, much more
So there you have it. There’s plenty more extensions out there for almost anything you can think of. So go take a look.