Telerik blogs

imageWhen 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!

General Tools

Fiddler

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

It amazes me how many developers still don’t know about the great tools available for working with HTML/JavaScript/Page Resource in the browser.  Most of the tools listed below make it easy to see all KINDS of information about the current page.  In addition, all of them have a built in JavaScript debugger, and profiler, to help with JavaScript development!  IF YOU ARE NOT USING ONE OF THESE TOOLS YOU ARE WASTING TIME! 

Firebug – Firefox

When I was introduced to Firebug web development went from a dark stormy night, to a blissful summer afternoon!  

Chrome Developer Tools – Built INTO Chrome

The Chrome developer tools are similar to Firebug; however I prefer debugging JavaScript in the Chrome tools. 

F12 Developer Tools – Built INTO IE since IE8

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.

Window Resizers

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:

image

Out of the box it provides a few presets, but you can add as many as you want:

image

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:

image

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!

Form Tampering

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 – Firefox

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:

image

TamperIE - IE

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!

Image Tools

CSS Sprites

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):

image

ASP.Net Specific

MiniProfiler

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

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

Razor Converter

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! =)

ViewState Viewer – Firefox

Viewstate Indicator – Chrome

VS Specific Tools

Chirpy

In my last blog I discussed some awesome features in Telerik’s MVC Extensions, specifically the web asset handlers.  I received a few questions about how I handle minifying CSS and JavaScript files in VS.  As of late I have been using Chirpy.  Chirpy handles CSS, JS, CoffeeScript, dotLess, and more!  It can handle minification using YUI, uglify.js, Google Closure,  or the Ajax minifier. In addition, it can validate JavaScript, CSS, and dotLess files.  All in all, I find to be an extremely useful add-in for Visual Studio.  There is a great guide about the features available here.

JustCode

Telerik’s JustCode had built in code analysis and refactoring features for JavaScript and ASP.NET since day one, making it an indispensable tool for development.  In one of the recent releases the JustCode team added CSS analysis and refactoring features, making it even more awesome!  You can download a trial here

Bottom Line

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!

Happy Coding!

Download the RadControls trial today!


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.