[NSClassFromString(@"WebView") _enableRemoteInspector];

2) Start simulator

3) Visit http://localhost:9999 in Safari for a full-featured WebKit debugger.

I like competition but I'm not really sold on the advantages of this platform over its one-line, built-in alternative.

I thought that didn't work on the actual device, which frequently is different enough from the simulator that Catalyst could still be extremely useful.

Also, I've never looked into it, but is there any comparable built-in debugging method for Android?

That won't compile under ARC unless you declare +_enableRemoteInspector somewhere:

    objc_msgSend(NSClassFromString(@"UIWebView"), @selector(_enableRemoteInspector));

That's fine if you have yourself setup for native development. We're about helping web developers who don't want to do that.

Is it just me or does the demo screen just freeze up halfway through? He talks about clicking on things and showing changes, but I just see his screen nothing happening.

Oh my bad, looks like there was a snafu exporting from Camtasia so the screen freezes halfway but the audio continues. Fixing now...

You hopefully get the gist from the audio in the meantime, or can read up in the blog post or at https://trigger.io/catalyst

Fixed.

Yup, same here. Still, the overall concept is interesting and potentially useful enough that I'm going to try it out.

If anyone is interested, here's also my debugger (with breakpoints and everything!) for debugging JavaScript on mobile devices:

http://lexandera.com/aardwolf/

It works on iOS, Android, WindowsPhone7 and BlackBerry. It's not very polished, though, since I stopped working on mobile projects and don't need it anymore.

Not trying to be a knob here - is this an improvement over creating a webkit browser window with the same dimensions as your mobile device and changing the browser's user agent?

You mean, for example, using Safari to debug mobile Safari / webview-based apps? That'll get you about 80% there, but environment differences (i.e., memory and processor limitations) on the device and quirky rendering behavior in mobile webkit almost always result in weird bugs that traditionally have required a lot of poking around blindly to fix. Differences between the simulator and the actual device are fairly common too.

It's only fairly recently that useful debugging tools like this and the built-in iOS 5 stuff have emerged.

Doesn't seem quite as easy as copying a script tag into your index.html and clicking a link...

I think with WebKit there’s remote debugging built in already.

Yes, there are various options including using Weinre locally.

By hosting Weinre we've tried to make it simpler than making sense of these instructions for example: http://www.webkit.org/blog/1875/announcing-remote-debugging-...

So, almost the exact same thing as PhoneGap - a hosted wienre. http://debug.phonegap.com/

Similar, since it's based on the same open source project: Weinre.

We've added a tab to let you track calls out to the native bridge, see error / success codes and the response. Pretty useful when you're working on hybrid apps.