Curiosity is bliss

Javascript Shell bookmarklet for IE

The Javascript Shell is an awesome utility for javascript development. It was written by Jesse Ruderman and some other contributors.
The bookmarklet version is the most useful, but it unfortunately only works in Firefox.

Here is an updated version which brings some love to IE developers: Javascript Shell for IE bookmarklet.
You might run into issues with pop-up blockers, in which case you can simply allow pop-ups from the site you're working with.

Remote loading:

The first problem with supporting IE is IE's limitation in bookmarklet size. Since version 5.5, IE only allows 512 characters in bookmarklets.
The simple workaround is to use a small bookmarklet which acts as a bootstrap but doesn't contain the actual code. Instead it inserts a <script> element to load the large script content remotely.
Brad Neuberg has an implementation of this remote loading bookmarklet, which I re-used.
The script file that is remotely loaded is currently hosted on my blog, but I'd love to host it somewhere else. Hopefully, the caching headers should avoid a large part of the server traffic and load. Let me know if you have some alternative hosting suggestions.

Finding the caret position:

The second problem was in the Javascript Shell code itself, with a function that figures out the position of the caret inside a textarea. That code didn't work in IE, as IE and Firefox use pretty different methods for dealing with selections.

Here is the fixed getcaretpos method, which uses a technique described by Mihai Bazon:

Enumerating members of a javascript object:

There is one more problem, with tab completion, which I couldn't fix yet.
If you type "document.getE" and then press TAB, a couple of completions should be suggested to you, including "getElementsByName".
This works in Firefox, but in IE it doesn't.

If you evaluate "document.getElementsByName" in IE, you get:
"function getElementsByName() { [native code] }".
So it looks like native methods don't get listed when enumerating the members of an object. A more direct repro is to call "props(document)" or evaluate "for(var i in document) { print(i); }".
Within the Javascript Shell on Firefox this will list "getElementsByName" as one of the possibilities, but it's missing in the case of IE.

Any suggestions on how to work around this?

Update (2006/04/26): I posted a screencast of the Javascript Shell bookmarklet for IE on PutFile (best viewed in "800" size).

Update (2006/05/01): Joshua Allen, who is now a technical evangelist on the IE7 team, pointed out that this bookmarklet doesn't work in the latest version of IE7.
IE7 Beta 2 (5346.5) crashes when you try to launch the javascript shell from the bookmarklet. I'll follow up with him to investigate.

Update (2006/06/07): I haven't identified the crashing issue yet, it didn't crash for me on all the versions of IE7 that I tried.
I did a fix for IE7 though: you can now complete with Ctrl-Space, in addition to Tab. Tab doesn't work well, because it actually moves the focus to the new url bar in pop-up windows... Use Ctrl-Space instead.

Posted by Julien on April 19, 2006. Permalink