When I am not hacking code, I can usually be found tinkering with cars. I have been working on cars for a long time, and have acquired quite a collection of tools along the way. It’s safe to say I love tools much to my fiancée’s dismay. =) In this blog I highlight a few tools I find useful for web development, and best of all, almost all of them are completely free!
Fiddler is one of the best HTTP debugging tools available today. It can be used any time you want to capture all HTTP traffic between your computer, and the internet. In addition, it can be used to create, replay, inspect, and tinker with any HTTP request. Actually Fiddler has way too many capabilities to list here! Check out these getting started videos for more information.
General Browser Tools & Plugins
Client-Side Debugging and Inspection
When I was introduced to Firebug web development went from a dark stormy night, to a blissful summer afternoon!
I first used the IE developer tools in IE7 when it was a separate download. Back then they were helpful, but nothing amazing. I tend to only use F12 Developer Tools when debugging IE problems. That said they are better than nothing, and I look forward to seeing what comes with IE10.
While developing the UI for a web application it is often helpful to look at the site in a variety of resolutions. These tools allow you to do just that!
Resize Window – Chrome
Resize window sits right next to the chrome address bar making it 2 clicks to change the resolution:
Out of the box it provides a few presets, but you can add as many as you want:
The cool part about this resizer is it’s ability to resize the window including or excluding the browser chrome, which is very helpful for previewing sites targeted for mobile devices.
Built into IE Developer Tools
This is one feature the IE developer tools provide out of the box that none of the others do:
The IE developer tools are only capable of resizing the entire window, which means the view port is actually smaller than the target size.
About Firefox -
I have never found a good window resizer for Firefox. If you know of one I would love to hear about it!
Sometimes you need to send bogus data in a request to test server validation, however; it might not be easy to do because you have some really awesome client validation happening. (Note: Proper test coverage would help here, but that’s a whole ‘nother thing =)).
In these cases I tend to use one of these tools to intercept the request and tweak it:
TamperData actually captures and displays all traffic passing through Firefox. Clicking Start Tamper, and submitting a form, displays the dialog below allowing you to customize almost everything about the request:
This is the first form tampering tool I ever used. It’s very simple and effective. It can sometimes get annoying as it pops up on every POST when it is enabled; so make sure to disable it when you don’t need it!
About Chrome –
There is not a tool like this available yet for chrome surprisingly. The reason is due to API limitations in Chrome. However, the Chrome team recently added the needed hooks to make such a plugin possible, so stay on the look out!
This site is by far the best sprite builder I have used. I like it because not only does it combine the images, but it will offer to create a rollover version using sepia, desaturation, and a few other options. In addition, it will spit out the CSS or SASS for the sprite sheet, and provide example usage! Saves tons of time!
Example sprite sheet, as you can see I chose to have it create a desaturated rollover effect (bottom row):
MiniProfiler is a lightweight profiling tool allowing developers to profile server side methods, and ADO.NET calls. Results are shown client side as you browse the site making it extremely easy to identify slow operations. It is extremely lightweight; so no need to worry about profiling production sites. In fact, it was created by the StackOverflow guys and they run it 24/7 to monitor the StackExchange sites. Scott Hanselman created a great guide available here.
Glimpse gives developers a client side glimpse of what is happening server side. Glimpse captures metadata about each request, and sends the data to a client side interface. Meaning you can use it (much like MiniProfiler) as you browse your site. In addition, Glimpse makes it easy to create plugins, meaning it’s capabilities are only limited by your imagination! Make sure to check out the quick start guide here.
MVC Specific Tools
If you are looking to upgrade older ASP.NET MVC projects to Razor, but dreading the conversion process, know that there is hope! Telerik created this awesome tool to convert all the views in a project from the web forms view engine to razor!
Web Forms Specific Tools
View State Inspectors
These tools are pretty self-explanatory, use them when you want to inspect a page’s view state! =)
VS Specific Tools
The above list covers just some of the great tools I use when doing web development. There are tons of other tools out there though, and I would love to hear about your favorite tool!