View Generated Source in BBEdit for Safari

This is my first post using Mars Edit, the Cocoa blogging client. First impressions are positive. A slick interface with lots of polish… but it is a Cocoa app, so no surprise there. Would be nice if command-t opened the “Show Fonts” floating font chooser like most Cocoa text editing apps.

Anyway, I was reading a blog post on Easy Reader about a pretty insane aspect of IE’s DOM implementation. There is an unbelievable hack in the IE DOM implementation that is addressed in said post… I suggest you read that post, lest you be bit by the IE bug yourself.

Besides uncovering untold horrors in the IE DOM implementation, the lovely Easy Reader blog post mentioned above also linked to a Firefox extension called “View Generated Source” that provides a nice feature…

Normally, when you use JavaScript to dynamically alter the DOM tree of a given page after it has loaded, you cannot see those “live” changes when you “View Source” in your web browser. The “View Generated Source” Firefox extension linked above provides a nice gui for viewing the “live” DOM tree source. There have been a lot of bookmarklets and other tricks for viewing live source like this in the past, so this isn’t really anything new, but it’s very nice.

But here’s what I really want… I want to be able to take the “live” source of the front most browser window, and paste it into a new, frontmost BBEdit window with nice, HTML syntax coloring applied.

So here’s an AppleScript to do just that. It only works with Safari, however. If you want to use it, click the link below to paste the script source into a new Script Editor.app window — then save the script in ~/Library/Scripts/ as View Generated Source in BBEdit.scpt to make it available to you in your Script Menu up in the OS X menubar.

Using this AppleScript is much like using a normal bookmarklet… navigate to the page in which you want to “view generated source” in your front Safari window… click on the OS X script menu and select the “View Generated Source in BBEdit” item that you saved to your local Scripts folder (by following the instructions above).

Download “View Generated Source in BBEdit.scrpt”

global jsCode
global htmlSource

set jsCode to "document.documentElement.outerHTML"

tell application "Safari"
    set htmlSource to (do JavaScript jsCode in front document)
end tell

tell application "BBEdit"
    activate
    make new document
    set text of front document to htmlSource
    set source language of front document to "HTML"
    select insertion point 1 of contents of front document
end tell

BTW, by the end of my first post using Mars Edit, I’m a big fan! Very intuitive.