Most designers have a set favourite tools they turn to for day to day design tasks. In addition to the more traditional design tools like Photoshop and Dreamweaver some little applications add-on or integrate straight into your browser without the need to use a separate application, allowing you to skip a few steps and streamline your workflow. Most of these tools make daily tasks easier whilst others are simply so great that you can’t comprehend how you survived without them. Here are the top 5 browser tools in my design toolbox.
1. Firebug add-on for Firefox
Apart from Dreamweaver and Photoshop Firebug is without a doubt the tool I use the most when designing, coding and debugging web pages. Firebug integrates seamlessly with Firefox and grants you a vast array of web development tools at your fingertips. You can inspect, edit, monitor and debug CSS, HTML and JavaScript on any live (or local) web page directly in the browser.
It is absolutely invaluable to debug and test CSS changes within a web page to identify where an element is inheriting unwanted styles. You can even edit CSS and HTML directly in the browser and easily disable or enable CSS styles to test the outcome. I think I could probably survive without Dreamweaver and just using Notepad++ or a similar text editor with code highlighting instead, but I’m not sure how long I’d last without Firebug.
If you use a lot of jQuery you should look into using FireQuery which is another addon that works together with Firebug and allows you to debug jQuery scripts from within the browser.
Firebug Alternatives: A good alternative if you’re not using Firefox is the build in code inspector for Chrome. There is also a 100% JavaScript version called Firebug Lite which you can use in any browser through a simple JS include however it does not include all the features of the full Firebug addon. It’s better than nothing when testing in IE6 or IE7 though.
Get the Firebug Firefox add-on here
2. Web Developer add-on for Firefox
Another extremely useful Firefox add-on the Web Developer Toolbar adds a huge number of web development tools to your browser. Mostly I use the Web Developer Toolbar for the following:
- Quickly enable or disable JavaScript on pages
- Resize the browser window to different sizes to test page layouts
- Easy access to inspect cookie information on pages and disable cookies for testing
Get the Web Developer Firefox add-on here
3. Grid & Rule Bookmarklets
I’ve only recently discovered these handy bookmarklets. Grid overlays a customisable grid directly in the browser, “rule” adds rulers and the ability to add guide lines that snap to elements on the page. This is extremely useful for making sure layouts line up correctly and spaced evenly (if that’s what you want that is).
Get the Grid bookmarklet here, and the Rule bookmarklet here
UPDATE: Allan Jardine has now created a new bookmarklet called “Design” that includes both Grid and Rule as well as two additional tools Crosshair and Unit. Allan describes his Design bookmarklet as “a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet”.
4. ColorZilla add-on for Firefox
Another recent addition to my design toolbox ColorZilla allows you to use an eye-dropper tool from within the browser to quickly check any colour and copy the RGB or HEX code into another program, typically Dreamweaver or Photoshop. Previously I would have done a print screen, copied that into Photoshop and then check the colours from within Photoshop. Needless to say being able to do this directly in the browser eliminates several steps and avoids extra clutter of screenshots within Photoshop and reduces memory usage. The add-on has a very small visual footprint and only adds a very small eyedropper icon in the bottom left corner.
In addition to the extremely handy eyedropper tool ColorZilla also features a handy DOM colour analyser which quickly gives you a visual presentation of the colour palette any web page. There’s also a page zoom function which seems a bit redundant considering Firefox already supports this.
Get the ColorZilla Firefox addon here
5. HTML validator add-on for Firefox
The HTML validator add-on provides quick and easy access to HTML tidy or SGML parser validation in the browser without the need to submit the HTML to an online validation service. It has a very small visual footprint and only adds a small icon in the bottom right corner with 3 different icons depending on whether the page is valid or if it has warnings or contains errors.
What the validator does is nothing revolutionary as you can always submit your a url or upload a file to the W3C validator, however you don’t really want to keep checking an online validator every 5 minutes. The HTML Validator add-on is always there and gives you an immediate little warning if you’ve added or changed something that isn’t valid. It’s a convenient way to ensure your code is valid along the way rather than doing a bulk change at the end and perhaps risk breaking the layout. It’s also a good way to spot potential typos or mistakes that might make during a quick edit or two.
It might also be good idea to run your site through a couple of different validators towards the end of a project to make sure everything is up to scratch just in case on of the validators does not pick up everything.
Get the HTML Validator Firefox add-on here
Conclusion and summary
That’s it for now. You may already be using some of these browser tools, if not then be sure to check them out. They are both useful and time saving and even better they’re all free.
Do you have your own favourites? Let me know what browser tools are in your design toolbox in the comments below.