Windows Apps for Web Developers
When the editor of Nettuts+ requested an article to show Windows developers love by listing popular web development apps, I was all over it. OSX devs get a lot of attention, so it’s good to mix things up a bit.
What I want to do is list the development tools that I frequently use as a web developer on Windows. It may not include your favorite, and if it doesn’t, please let me know within the comments section. I’m always anxious to find new tools to enhance my workflow!
Writing Code
Visual Studio 2012
I wrote about Visual Studio before, and I think it’s an awesome IDE. It’s feature-rich with tons of bells and whistles.
Web Essential Extension for VS2012
Thank goodness browser-based debugging tools have evolved to what they are today.
This is the extension that makes Visual Studio great for web development. It brings functionality that web developers need such as:
- Bundling of files for future processing
- Minification of assets
- JSHint support for linting of your JavaScript code
- Top client-side templating engines including Handlebars, Mustache and JSRender
- The LESS stylesheet language with on-the-fly previewing
- CoffeeScript and TypeScript
Mads Kristensen, the creator of the extension, is a rockstar!
Sublime Text 2
It’s the little editor that can. Sublime Text is an amazing tool, and Package Control rounds it out with the extensions you need to really streamline your development. Nettuts+ has a TON of articles on this powerful editor, including a full (and free) course.
Browsers
I shoot for cross-browser sites, so having the broadest possible coverage is key. I also like to stay on top of new features that’ll be coming out shortly, and I also install dev and nightly browser builds to stay in the loop. Here’s the list of the browsers I use for testing:
One thing to note is that Safari no longer offers its newest version of Safari on Windows. It looks like v5.1.7 will be the last one, but I still keep it around for testing.
Browser-Based Dev Tools
Thank goodness browser-based debugging tools have evolved to what they are today. Otherwise, we’d still be using alert()
boxes to test our code. The great thing is that every major modern browser has built-in, sophisticated debugging tools to help you analyze your code, site performance and more. Here’s an article I wrote about IE’s F12 Developer Tools to get you up-to-speed.
- IE F12 Developer Tools.aspx)
- Firebug
- Chrome Developer Tools
- Opera DragonFly
- Safari Web Development Tools
Browser Extensions
I find browser add-ons and extensions invaluable to my troubleshooting work. Not only do they help in debugging code, but they also make creating pages easier.
Firefox:
I’m considering Currents for keeping my desktop and laptops in sync.
- Firebug – The old reliable that kicked off the browser-tool revolution. Still awesome in my book.
- ColorZilla – Gives me a color dropper that can help me snag the color code for most anything on a page. Love it!
- MeasureIt – Ever wanted to see the dimensions of something on a page. This is the extension to get.
- YSlow – The original add-on created by Steve Souders while he was at Yahoo! to help developers analyze key attributes of their site’s performance.
- Page Speed – Steve then moved to Google and came out with Page Speed. Both are awesome and apply his principles for improving site performance.
- Web Developer Toolbar – This is always the second add-no I install because it gives me such granular details about my pages. The “Generated Source” option alone is worth it.
Mozilla’s Add-on hub has a number of great add-ons–not only for web development, but for all types of fun things. Be sure to check it out.
Chrome:
- Chrome Sniffer – Gives me a quick glance at which libs and frameworks are used on a specific page.
- Web Developer Toolbar – It’s the same as the add-on I described above but ported to Chrome.
- Pendule – Very similar to the Web Developer Toolbar but I find it’s UI better and it’s resize viewport feature is really nicely laid out.
Version Control
Git has won; hands down. And there’s a plethora of tools available; some are great and some feel overly-complicated.
- Git (command line) – Call me old school but I really like using Git via the command line.
- GitHub for Windows – With that said, Github’s Windows client is really slick and makes it easy to use Git and their services via an attractive user interface.
Virtualization
Even on Windows, I still need to use VMs for non-modern versions of IE, and while I wish I could test these different versions side-by-side, at least I know I can spin up VM instances and workaround this. Here’s the software I use:
- VirtualBox – Easy to use, supports every major OS and best of all, it’s free!
- BrowserStack.com – If I need to see how my site will look like on another OS, I just spark up this great service and it creates a virtualized browser session in my own browser. It even supports local development so I can tunnel between my local dev and BrowserStack’s cloud servers.
- modern.IE – Microsoft is trying to lower the friction to testing IE and this project is a big step towards that. You can scan your site for common compat issues and download VMs for testing IE versions.