Kevin Henrikson » Venkman

Firebug 1.0 Beta

kevin — Fri, 01 Dec 2006 06:48:05 +0000

I’ve been playing with the Firebug 1.0 private beta for the last few days and it’s quite a tool. v0.4 the last release of Firebug had already combined the most popular features Venkman, Console2, and the DOM inspector. 1.0 adds a entire new set of features. JS profiling and Net request tracing similar to Tamper Data are IMHO the most powerful. Joe has been hard at work and been fising issues as quick as we find them. Firebug now has enough functionality that it could implement and examine all the tips included in my entire presentation at OSCON.

The new website Get Firebug gives you a glimpse of what is coming shortly:

Crockford on JSMin and Obfuscation

kevin — Tue, 07 Mar 2006 15:00:57 +0000

Douglas Crockford knows a thing or two about compressing JavaScript. He wrote JSMin which IMHO is the simplest and fastest JavaScript minifer out there today. Coupled with his lint checker JSLint you’ve got two really good tools to write good solid code. I used JSMin to optimize digg.com’s homepage a few weeks back. As more and more AJAX apps start to take advantage of JavaScript the size and footprint grows dramatically. Even more so when folks import the various AJAX toolkits as a starting point. This means that tools like JSMin become a required part of the build/deploy process for those that are serious about optimizing end-user experience. There are other excellent minifer tools out there including Alex’s ShrinkSafe which is based on Rhino. ShrinkSafe takes an aggressive approach to not modifying the API’s as it uses a real JavaScript compiler/run-time to shrink the code. This is important when you don’t want your public API to change as is true for any JavaScript toolkit developer. Crockford makes the point that obfuscation is really just a small hurdle and any serious programmer, given time can extract the useful bits. This is especially true for JavaScript where no matter how much mangling of the code is done before it’s sent to the browser it’s still sent in plain text. So it’s trivial to attach a debugger like Venkman and walk through each line of code. Glad to see Douglas putting focus back on JavaScript as noted by his many recent updates to JSLint and now his first blog entry on the Y! UI blog. I’d also guess that Yahoo’s focus on JSON for their REST api’s is in part due to Doug joining them.

ref: Minification v Obfuscation » Yahoo! User Interface Blog

AJAX Developers Toolbox – Overview

kevin — Sat, 11 Feb 2006 09:13:51 +0000

AJAX programmers today have many tools available to them. Here’s a quick overview of some popular ones.

Debuggers
Firefox – Venkman without a doubt is a must have for any serious JavaScript hacker these days. All the functionality you’ve come to expect in a debugger step in/out/over, set break points, trace the call stack, inspect variables, eval code on the fly; you get the picture. Up until recently Venkman only worked with Firefox 1.0.x, Joe Walker posted a version that works for Firefox 1.5.x.

IE - JavaScript debugging for Internet Explorer is a bit trickier. You can use the Microsoft Script Debugger or if you’re willing to shell out some cash Visual Studio offers a richer debugging environment.
Mozilla – Venkman ships by default with Mozilla, and provides a nice option for those who just want to get their browser and debugger combination in one shot.
Integrated Development Environment (IDE) The choice of editor’s or IDE’s is sometimes characterized as a war. Not to pick and choose but Eclipse has become a popular editor for many web programmers. It’s roots are with server-side Java code but more recently the Web Tools Platform (WTP) has come along and aims to change that perception. They’ve made signific progress over the past year, but at the moment Eclipse + JSEclipse is my personal choice. The JSEclipse plug-in has quick code-complete and simple, clear syntax highlighting.
Syntax Checker JSLint – Slick syntax checker. Catches all those stupid mistakes, and helps enforce good programming conventions.
"JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily an error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems."

Those are some tools any JavaScript or DHTML programmer would be hard pressed to get by without.

Know of a tool or program that you’d have in your AJAX Toolbox? Post a comment!