As a web designer+developer hybrid, I find it imperative to have a plethora of workflow tools. Though, anyone can benefit from them, I’ve chosen some specific extensions I use on a day to day basis. All are available in Chrome and Firefox except for Open With Photoshop(hopefully available in Chrome soon). I don’t use Safari as my main browser, but I’m sure some of these are available there as well. Other browsers make use of extensions but of course you’ll find an abundance in the most popular, that being Chrome and Firefox.

LastPass

A browser plugin and mobiel app that keeps your passwords and auto-fill form information organized. This little tool cuts down the time it takes me to login to all of my WordPress sites to do multiple updates every day. I can skip through tedious password document queries and get right to work. Of course you could use Chrome’s built in password tool but this provides an encrypted system across any browser and even on my Android or Apple mobile devices.

Firebug

This browser plugin is somewhat limited with Chrome but is the perfect website debugging tool for Firefox. I’ve found myself jumping back and forth from Chrome and Firefox lately due to pros and cons of both. Firebug has one feature that I use everyday. Right-click element in inspector > Copy CSS path. This is really useful for editing CSS when trying to work quickly with someone’s unfamiliar code. If I need to make a quick edit to the element style I can grab the direct CSS path and even add the !important declaration. Particularly useful if I don’t want to directly change a WordPress plugin CSS file. It makes it easier to update plugins and still retain my specific styles.

Awesome Screenshot

An easy to use browser screenshot plugin. I’ve used quite a few in the past years but this one is consistant across browsers. The best feature is the ability to capture an entire webpage instead of only the visible portion.

MeasureIt

Useful for quick in-browser pixel measurements. When no specific element width is defined or if percentages are being used. Allows me to quickly analyze a page.

ColorZilla

Grab a hex code or RGB of any rendered element within the browser. Copies the code directly to your clipboard for use in your CSS or Photoshop/Fireworks documents. The “Webpage Color Analyzer” feature is a great tool to quickly display a palette of the current page colors.

Open With Photoshop

Self explanatory. Right click on an image in a webpage, click “Open With Photoshop.” I find myself using this at least 5 times throughout the day.

I’m always looking for new tools/browser extensions or workflow techniques. Have any of your own?

The post 6 of the Best Web Browser Extensions for Designers appeared first on Hanyok & Co..