Top 5 Browser Extensions for Developers
If you’re into web development and design, then you know that it’s not the easiest job in the world. Developers spend a ton of time mapping out the site, selecting fonts, shapes, or colors, and of course adding content. In addition, a lot of effort is spent checking for bugs and ensuring that their sites look and work great on multiple browsers and platforms. Yep, it’s no cakewalk. But as most passionate web designers would tell you, all that effort is worth it once they see that their site is up and running, fully functional, and a joy to use.
Still though, is there a way to lighten up the load?
Answer: Yep, there sure is. The following browser extensions are some of the top plugins that web designers and developers use when creating websites. From helping you pick the right font, to ensuring that all your measurements are correct, these plugins can help make your job a whole lot easier:
Web Developer – This convenient add on provides your browser with a toolbar containing various web developer tools. It gives you easy access to cookies, forms, outlines, plugins, and more. And by having all these tools right on your browser, you’ll be able to implement real-time changes to your site without having to go to the actual code, thus improving speed and efficiency.
The Web Developer plugin uses a cross browser framework, allowing it to function on Chrome and Firefox.
ColorZilla – Need assistance with your color-related tasks? Look no further. ColorZilla comes with a color picker, eye dropper, gradient generator, and other tools to help you select and modify colors in your design. This plugin also gives you a color reading from any location on a page, allowing you to adjust colors with just a few clicks. In addition, ColorZilla enables you to analyze a page’s color palette, so you can match your designs accordingly.
Like Web Developer, this plugin is also available on Chrome and Firefox.
Stlyebot – Available only for Chrome users at the moment, Stylebot enables you to change the appearance of websites instantly. With this tool, you’ll be able to manipulate the look and feel of any site with custom CSS. Simply select an element then choose the changes you want to make using the editor. If you prefer to do it manually, Stylebot lets you do so with CSS. It even allows you to preview and install styles created by users for your favorite websites.
WhatFont – Ever visited a website and wondered what font they’re using so you can use it in your own designs? Then you’re going to love this extension. WhatFont saves you from countless hours of scouring the endless world of typefaces. You no longer have to manually experiment with multiple fonts to find the perfect one, with WhatFont, all you need to do is hover over the text and the plugin will instantly generate all the info you need. It even shows you the font size, line height, and color.
WhatFont also implements a cross browser add on framework and is available on Chrome and Safari.
Ruul – This nifty Chrome browser plugin provides a simple on-screen ruler to help you measure and line up the elements of your design. Whether you’re tweaking your line height, adjusting the strokes, or just want to verify the size your banner ad, this plugin is a must-have.