Introducing KitMate: TextMate + WebKit
September 9, 2007
When the WebKit team released the new Web Inspector, I felt awed by the DOM highlighting and Javascript console built into the beautiful Cocoa-like interface. At the same time, I was looking for a way to get a Javascript debugger into TextMate, as well as a way to inspect element hierarchy in my webpages. It occurred to me that downloading WebKit nightly, enabling WebKitDeveloperExtras, and exporting the framework might work. It did.
Time for infinite Web Preview happiness! To make it easier to get the Web Inspector into TextMate’s webview, I made an application called “KitMate” to help export the framework.
-
1.Download a nightly build of WebKit and put it in your folder /Applications.
-
2.Download KitMate v2 and put it anywhere you want, and then you can drag it to your dock. Launching KitMate will open TextMate with the nightly WebKit, and then you can right-click in the Web Preview and choose “Inspect Element.”
-
3.Enjoy! You can also change the icon of KitMate from vladstudio’s to your own.
Updates to Post: The Terminal command was added to replace the plist editing steps (see right) and then incorporated into KitMate for version 2.
Leopard has replaced the old Web Inspector with the new three-pane one, so all you have to do is run KitMate once to get it.
A new version of the Web Inspector is out that allows you to edit CSS from the inspector rather than from TextMate. Very neat!
I have also created similar WebKit exporting utilities for Smultron and Coda users.
