TextMate Tip: Debug Canvas/Quartz code

Here’s something pretty cool I just noticed… you can use TextMate’s live preview feature to debug JavaScript Canvas code.

Open an HTML document that contains a canvas element with TextMate. In the Window menu, click Show Web Preview. Then start scripting the canvas element with JavaScript inside the HTML document.

Watch as the web preview pane updates as you type… It’s nice, cuz you can see the graphics being drawn live! Instant feedback as you type. SWEET!

In fact… come to think of it… this is a great way to debug Quartz2D/CoreGraphics code in general. The JS canvas API very closely mirrors the more-commonly used functions in the C Quartz API.

TextMate+Canvas Screenshot

Leave a Reply