I’ve been wading through Jot Script, AJAX, dojo, css, and JavaScript over the last month building out applications on the Jot Wiki Platform. About a week into it Fadey [1] sat down with me and set me up with tools that changed the way I thought about developing on the web. Apparently while I was distracted managing stuff at my previous job I had been left in the dark ages. Here are the tools I found invaluable.
If you do nothing else, download and install this toolbar. I can’t count how many ways this is useful. The first is being able to edit css on the page without needing to edit the css file, upload it, and a refresh. This is huge and saves a ton of time when you are trying to debug issues or work with color schemes. It also helps debugging probems in a production environment because you don’t have to change the stylesheet to change styles. Other useful features are being able to turn on table borders, viewing topographic info, viewing cookies, outlining block elements, resizing the browser to specific dimensions, just to name a few. This toolbar brings together everything you ever wanted in web development into one place and makes it one click away without needing to refresh the page or change your code.
This shell is amazing. It basically allows you to treat the current JavaScript page context as a shell session. So you can access variables, objects, and pretty much anything else you want. You both inspect and change everything on the page. When your JavaScript does something you don’t have to go back and insert a bunch of print lines or step through the debugger. You just pop up the shell inspect away, change JavaScript state on the page, create new objects to test, replace functions, etc.
Firefox DOM inspector
This is huge when trying to figure out what its going on with your HTML/css layout. It gives you the full page in a browse-able DOM tree list. Even better is this bulls-eye tool where you click on the page and it opens the DOM to that location and outlines the DOM node. Huge, huge, huge. It also allows you to view the derived CSS properties which is handy when swimming through deep CSS inheritance hierarchies. I can’t count the number of times this has helped me. This is part of Firefox but you have to choose the custom install and select developer tools when you install Firefox. If you already have Firefox installed, you can go through the install again without messing up your installation.
This is pretty much the only way I’ve figured out how to debug AJAX (beyond server side print-lines). This tool let’s you inspect the HTTP headers as they go across the wire.
This is a pretty cool tool for debugging HTML structure. It is form of “view source” for a page but it renders it using hierarchical colored blocks with the source imbedded in the blocks. I’m a big fan of visual tools for helping debug things and this one hits the mark.
In true Microsoft form, MS has released a copy of the Firefox Web Developer Toolbar. I can only imagine they found their employees developing in Firefox because the tools were so valuable and they realized that could be a problem. Also in true MS form it has a subset of the features of the original…for now.
Di Wang pointed me at Fiddler, a fantastic (IE only) HTTP traffic debugger. It is an invaluable tool for inspecting the network traffic of your new fangled web 2.0 application. It is very useful for breaking down performance problems and load time issues.
I hate putty. There, I said it. I know everybody uses it, but every time I open the that first launch dialog, the shitty user interaction design gives me a sharp pang of nausea. So imagine my delight when I found an scp client that is a joy to use. Nothing fancy here, just a really good scp/ftp client (windows only).
**
[1] Fadey has the coolest IM icons I have ever seen:
[...] I added Filddler and winscp to my list of required web developer tools. [...]
Firebug gets no love?
http://joehewitt.com/software/firebug/
It does DOM inspection, JavaScipt debugging, console logging via console.print(), Ajax request spying, etc, etc.
Joe Hewitt also developed the DOM Inspector which you listed here. I think he meant for Firebug to be a replacement for DOM Inspector. He was also one of the developers of Firefox.
I was going to mention Firebug too — it’s (in my opinion, anyway) the best debugger for JavaScript at the moment, and the DOM inspector is a huge improvement over the Firefox DOM inspector. (It’s not at all surprising to learn that Hewitt was one of the developers of Firefox — Firebug reflects a great understanding of the Firefox implementation…) As for debugging server side AJAX, surely you’ve obviated the need for server-side print-lines by using DTrace, no? ;)
Firebug! I missed Firebug! Please excuse me, I’m a manager. I don’t actually do any work or know anything about this stuff.
I would have included DTrace but I heard the guys who wrote that thing were unruly. Word is one of them beat a guy up at the last OSCON conference just for mixing his tenses.