15+ Web developer Tools a Front-end Developer can’t life without

By March 22, 2011 Mobile

IE WebDeveloper Toolbar

Is a free plugin The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. Features:

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • More

FireBug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

  • Inspect HTML and modify style and layout in real-time
  • Use the most advanced JavaScript debugger available for any browser
  • Accurately analyze network usage and performance
  • Extend Firebug and add features to make Firebug even more powerful
  • Get the information you need to get it done with Firebug.
  • More

Safari Developer Tools

Apple has brought its expertise in Mac OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

CSS Grid Builder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

CSS Compressor, Minify CSS

Use CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!

GIMP Photoshop

Adobe Photoshop is the undisputed heavyweight king of image editing, capable of satisfying every conceivable print- and online-imaging desire. However, like Visio, Photoshop’s features don’t come cheap. One very capable alternative is GIMP, an open source image manipulation program capable of producing very impressive graphics and sporting an extensible interface similar to Photoshop’s plugin community.

BrowserShot

Even though browser developers have made great strides towards standards compliance in recent years, it goes without saying that you should always “trust, but verify” (i.e. test your website within multiple browsers residing on multiple operating systems). Yet many developers might not have a Mac or even a Windows machine at their disposal. A great alternative is BrowserShots, an online utility capable of not only testing browser compatibility on multiple operating systems, but also multiple browser versions within these systems. Further, it tests compatibility with a number of lesser-used browsers, including Lynx, K-Meleon and Konqueror.

GreenShot Screenshot grabber

Whether you’re creating Web-based user documentation or sending clients screen grabs of user interface prototypes, you’ll need a capable tool for taking screenshots. Yet it wasn’t until relatively recently that capable open source solutions were available. If you’re a Windows user, I recommend Greenshot, a great utility capable of not only taking screenshots but also manipulating and sending screenshots.

FireQuery

Allows you to debug and code jQuery code. Requires Firebug.

FirePHP

Allows you to debug and code on the fly with PHP. Requires firebug.

Online CSS3 creator

Spits out CSS code that will be able to be viewed across different CSS3 capable browsers.

FontSquirrel

Ever wanted FREE @Face-Fonts that are very easy to use? Font Squirrel takes all the head-aches out of using fonts on the web.

Lorem Ipsum Text Generator

An easy way to get some text for making content in mockups.

IETester

If you want to test older version of Internet Explorer I recommend that you look at this tool called IETester.

SEO HTML Cheat Sheet

This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.

Vidal de Wit

Author Vidal de Wit

More posts by Vidal de Wit

Leave a Reply