Developer Tools

Every developer has a unique set of tools he or she uses to help develop web applications. The main tools anybody will use are browser extensions, although there are still plenty of tools in the clouds that can be used to help developers. Here are some of them:

Browser Tools

Web Developer Toolbar

Firefox – Chrome

Not quite as common as Firebug but just as useful. The Chrome version is not quite as extensive due to the API restrictions. There are plenty of tools that help you debug JavaScript applications, modify and view cookies, measure parts of a page without throwing it into Photoshop, re-size the page to specific sizes for checking compatibility, shortcut links to validate all the elements on your page, and much more.

Firebug

Firefox

This is one of the most common extensions that almost every developer has. It has essential tools for checking and modifying the generated HTML, debugging scripts, and viewing detailed errors. There are plenty of tutorials to help you get familiar with this tool. Chrome has an existing alternative to Firebug that is already installed.

Spell Checker

Firefox

Modern browsers already have a spell check for things you write into input fields or text areas. I also find it useful to Spell Check full pages, such as pages I dynamically created. I simply visit all the pages on the site to check for bad links and/or layout errors, then click a button to make sure every thing is spelled correctly.

DownloadThemAll!

Firefox

Simply click the button and download as many elements on the page you want. I’ve used this a few times to download documentation that was only available on the web. Doing this allows me to not rely on a website for documentation, since it could cease to exist, thus causing the documentation to no longer be available.

Tamper Data

Firefox

This tool allows a user to see all data submitted in an HTTP request, which is useful for debugging JavaScript applications that would require a lot of HTML to replicate a form submission. Unfortunately, Chrome does not have an equal extension for this. A similar item exists in their already installed developer tools, however it’s read-only. Firebug also has a similar read-only tool.

Online Tools

Google Libraries

Often new projects don’t always have the libraries you need yet. This tool allows you to hotlink to lots of JavaScript libraries and frameworks. Some developers choose to never host libraries and just use this for its ease of use and shared bandwidth cost.

JsFiddle

This is a very handy tool for sharing JavaScript. You pick a library, add some JavaScript, CSS, and HTML and see a live preview in front of you. If you are collaborating with a co-worker, you can send him a link to it, then he can make edits and send you a new link.

Web-Safe Fonts

Typically a designer will tell you which fonts to use when slicing their PSD’s, however there are plenty of instances when you could be unsure about a font. The designer may not have used a web-safe font. This tool lets you see a few web-safe fonts and pick from the list, making it faster than waiting for your designer to get back to you.

CSS Lint

This tool is more for telling you what you did wrong. There are a few items I disagree on, but I’ll spare you the drama. It does point out a lot of obvious items you could be improving.

CSS Compressor

I like to format my code as much as I can when going live with my applications, and CSS is no exception. Input your CSS into this tool, select a few options, and you will have compressed CSS code you can use for live sites.

JavaScript Beautifier

This tool is one of two formatting tools that deal directly with decompression. It will take messy code and make it easier for you to read.

JavaScript Compressor

This does the opposite of the one listed above by compressing all of your JavaScript, which I find helpful. When going live with applications, it’s always best to compress your JavaScript for faster loading times.

JSON Formatter

In lots of the applications we create, we make AJAX requests sending JSON back and forth. The downfall is JSON needs to be sent without formatting, which helps you read it a bit better and tells you if it’s valid or not. You can compress and format JSON with this single tool.

Instant SQL Formatter

Often, you may output SQL that is dynamically generated so you can test it. This happens a lot when debugging older applications. The downfall is longer queries are more difficult to read unless formatted.

(Source: Skynet Solutions)

By Blaine Schmeisser