HTML Tools I wish I didn’t need 2

Posted by science on October 22, 2007

Machine mill

Some tools no matter how great are just a bummer. The work that is implied by their existence outweighs their inherent, internal elegance. Charlton Heston / NRA has kindly pointed out that the gun is such a tool (though I don’t think they’re thinking of it in this way).

I use three excellent tools that I wish I had never needed to begin with - but HTML and HTML browsers being what they are, you might as well know about these tools too.

First off, if you haven’t heard of Firebug make some room under that rock you’ve got, I’d like a space. It debugs javascript and ajax and most notably allows you to edit code live in the browser and see what it does.

Second, there’s Tamper Data which is more obscure but pretty helpful: it lets you monitor raw http traffic to/from the browser and helps decode what’s going on (by decoding the URL parameters for example). If you’re trying to figure out a low level issue, this is the tool. It’s like a dedicated http-only wire sniffer built right into FireFox.

Finally there’s the gigantic Web Developer toolkit which lets you debug and analyze HTML eighty ways to Sunday. To understand how powerful it is, download the tool and go to a complex web page. Press “ctrl-shift-F” (may be different on Macs) and watch the magic. Live interaction with your div tags.

Like I said, it’s shameful that I should ever have to use such tools as these. However, life is the way it is for now. Get back to work.

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. Roy Radio Snack Sun, 16 Dec 2007 04:43:49 EST

    Firebug lets you edit code right from your browser? Interesting… so you mean from there you can just simply save the page you are working on, yes? Sorry, newbie to html here.

  2. science Sun, 16 Dec 2007 11:04:19 EST

    Roy: You can’t edit the original webserver’s page of html. But when you’re attempting to debug a page, Firebug lets you edit the javascript or html that’s currently being displayed in the browser and see what effects it has on the page. Then you can save the resulting solutions into the original page so others can see it too.

    For example, you can open the CSS file that’s affecting the page you’re currently viewing and adjust the font size for the “body” section - this immediately shows up in the browser, so you can play with alterations in real-time. Once you see what changes you want to make to the CSS file, you can open save those changes manually back to the webserver and other users will see them also.

    Does that help?

Comments