Join 3,572 readers in helping fund MetaFilter (Hide)


What are the top plugins and tools for web developers?
January 15, 2011 12:23 PM   Subscribe

What are your favourite plugins, IDEs, tools and tricks for client side web development? I'd like to have a "tip of the week" or a "plugin of the week" spot in a course I'm delivering. Main content of the course is HTML5/JavaScript/CSS, with a bit of JQuery and Silverlight.

My preference is for browser plugins or online tools, rather than things that require admin rights to install - so the students can have a play with it. If there's something awesome that requires an install I might talk about it with slides though, so go ahead and mention it.
posted by handee to Computers & Internet (15 answers total) 14 users marked this as a favorite
 
Well, I'm sure you already know about Firebug, right?
posted by dubitable at 12:45 PM on January 15, 2011 [1 favorite]


Spoon's Browser Sandbox is a fantastic way to test on different browsers. Unfortunately they recently lost their ability to host IE instances, but hopefully they'll restore that soon.
posted by drjimmy11 at 1:06 PM on January 15, 2011 [1 favorite]


(I think Spoon does require a small install, though. Sorry.)
posted by drjimmy11 at 1:07 PM on January 15, 2011


There's also the Developer Tools which come with IE8. They come bundled with the browser, but a lot of people don't know about them. Frankly, they suck- it's like an extremely crummy ripoff of Firebug- but it's the best you can do for IE debugging. You can open them by pressing F12, I think, or using the top menus.
posted by drjimmy11 at 1:10 PM on January 15, 2011


Google Chrome Frame for IE.
posted by axiom at 1:11 PM on January 15, 2011


I use XRAY a lot for figuring out the structure of a page without getting into Firebug or Safari's Web Inspector.
posted by nicwolff at 1:15 PM on January 15, 2011


I'd recommend a little overview of source control, git, mercurial, or svn. Some people think of it only from a programming point of view, but it's amazingly helpful in anything text or markup based.
posted by advicepig at 1:22 PM on January 15, 2011 [1 favorite]


Aptana Studio
posted by wongcorgi at 1:59 PM on January 15, 2011 [1 favorite]


Fiddler is an Http debugging proxy for Windows. You can see the raw Http requests and responses, as well as set breakpoints to modify responses before the browser gets them, simulate modem speeds, and tons of other stuff. Works with Chrome and IE.

You should not use tools like spoon or IETester that host multiple versions of IE side by side because the haphazard mixing of Windows system DLLs is unsafe and unreliable. You can get free app compat virtual machines from Microsoft for testing different IE versions in Virtual PC. Just do a google search.

Finally, Visual Studio 2010 is my favorite environment for development of all sorts. You can get VS Express for free; again just google it.

Press F12 for developer tools in IE8+ or install Firebug Light. Chrome has excellent built-in developer tools as well.

LiveHttpHeaders is a firefox plugin that gives you about 1% of Fiddlers features. It lets you see the requests and responses, but that's about it. Better than nothing I suppose.
posted by jeffamaphone at 2:02 PM on January 15, 2011


Frankly, they suck- it's like an extremely crummy ripoff of Firebug- but it's the best you can do for IE debugging. You can open them by pressing F12, I think, or using the top menus.

drjimmy11, you reminded me also that there is a "Firebug Lite" too (for browsers other than Firefox) that I remember playing with once...don't know how awesome it is though.
posted by dubitable at 2:19 PM on January 15, 2011


A lot of JavaScript programmers still mix logic and content. As far as things to teach I think client-side templating should have more emphasis. The inbuilt jQuery template is adequate (albeit a bit slow) but Mustache.js or Handlebars are quite a bit faster.
posted by holloway at 2:44 PM on January 15, 2011


JWPlayer is a fantastic HTML5 compatible video player.

Firebug is awesome itself but there are even more cool extensions like Yslow and FireQuery

ditto on Fiddler.

Check out Google App Engine + Gaelyk for a ridiculously easy way to get a web site up and running.
posted by kenliu at 8:27 PM on January 15, 2011


Charles is similar to fiddler, but I like the layout a lot more. It has the option to view requests sequentially or hierarchically, and you can view requests and responses as headers, raw, text, and navigable XML, JSON and AMF views (Charles is specifically designed to make Flash debugging easier). Also does throttling, rewriting and all that crap.

It costs a little, but it's worth it to get rid of the nag screen and 30-minute run time of the free version.
posted by klanawa at 12:47 AM on January 16, 2011


Typetester is an in-browser service allowing you to compare your screen type using web-safe fonts as well as any other font on your system. It allows you to experiment with leading, tracking and other formatting and then pull the generated CSS code from it. Invaluable for creating sweet headings . . .
posted by jeremias at 12:21 PM on January 16, 2011


Microsoft has just released webmatrix, and it's looking good as a lightweight Web development environment.

This gives you a .net MVC web environment with the Razor view engine. Because you're using Razor, it's perfect for focusing on the HTML.
posted by seanyboy at 5:58 AM on January 18, 2011


« Older I'm scanning my financial reco...   |  This year I'd like to read 12 ... Newer »
This thread is closed to new comments.