JS Bin for Collaborative JavaScript Debugging

The weekend before last (28-Sep 2008) I blitzed through an idea I had on the shelf for about 6 months and put it live under the name JS Bin.

What is it?

JS Bin is a form of paste bin, but with a twist. It allows you to also include the HTML and CSS to provide context to your pasty. As such, it means you can actually run the JavaScript and pass this on to a colleague to help to debug.

A short list of features:

  • Save private snippet
  • Remote Ajax debugging
  • Snippet URLs run entirely on their own (i.e. without the JS Bin framework around them)
  • Support to quickly inject major JS libraries
  • Saves state within the open window (i.e. refresh and the code doesn’t reset)

In addition, any code snippet can be edited.

Take this example: query string aware JavaScript (http://jsbin.com/utala/)

…to edit it, you just add ‘/edit’ to the URL and you can modify the snippet yourself and save it as new:

http://jsbin.com/utala/edit

Why?

I had a conversation with Rey Bango some months ago where he was trying to debug a piece of code that had an Ajax hit. He sent me the code, but without seeing it running I wasn’t too much help to him.

I made a start some time ago offline and planned for a system to allow you to create fake Ajax handlers to respond to requests.

In the last couple of weeks I saw John Resig’s learning app and the sandbox idea suddenly had legs again. I knew I could write something very quickly, almost entirely in JavaScript (and since it’s a JS debugger, there’s no point in the extra work to make it degrade).

A small server side php file does the saving work (and maintaining old code snippets) and over the course of a few hours I had a fully working webapp that allows me to create Ajax responders and code snippets that run live and can make real Ajax calls.

Examples

I’ve recorded a couple of screencasts showing how it can be used:

Feedback

If anyone has suggestions, feedback, bugs, etc – please let me know!

16 Responses to “JS Bin for Collaborative JavaScript Debugging”

  1. This sounds great. Now when asking people to “upload a testpage” they can use JS Bin, which should be much easier and makes it clear that I don’t want to see the full page.

    A few things I noted while clicking around:

    The JavaScript area for a new script should be in edit mode by default. Otherwise I have to hover over the very small area below the navigation, which is easy to miss.

    In the HTML area it would be nice to out of edit mode (same for JS, I guess). Reset doesn’t get me there.

    Would be nice to have a URL that creates a new snippet with a preselected library, ala jsbin.com/new/jquery. I’d use that when asking for testpages.

    I didn’t get how the JavaScript and HTML tabs play together. Seems like I can use one or the other, but not really both together. Wouldn’t it make more sense to include the script from the JavaScript tab as a script on the resulting page, and add a CSS tab to do the same for styles? Actually that behaviour was what I first expected when reading about JSBin.

    PS: What plugin/feature are you using for the editable comments?

  2. @Jörn – that’s great feedback – particularly the link for direct library inserting.

    • Editable by default – I’m very close to making that the case. I really like the syntax highlighting, but as a user, you’re nearly always going to want to get right in and start typing.
    • Tabs playing together – obviously it’s not completely clear. The HTML tab has a %code% variable in it that it sucks in the contents from the JavaScript tab. The output tab is the result. The justification for separating out the JS + HTML tabs was that the app is targeted at JS developers (primarily) so the HTML boiler plate is enough to allow the JS tab run on a stand alone URL. Make sense?

    Re: editable comments: WP Ajax Edit Comments – but I specifically use v1.1.5.0 – I think I felt the integration was cleaner (I installed it a while back now).

    Again, thanks for the great feedback.

  3. Okay, I missed the %code% part. That makes sense.

  4. Excellent idea, I will be using this already.

    Although you’re targeting JS developers I think it would be quiet useful to separate CSS away as well. That way you can share fairly blown out snippets that separate styling, structure and interaction.

    Also whats the approach to exiting edit mode? The syntax highlighting disappears when you’re inside edit mode, but theres no way to get it back.

  5. @Anton – hit escape and it’ll revert back to edit mode.

  6. Right. You have to be focused on the editor (sadface) to do this.

  7. [...] Sharp wanted to take the pastebin concept a step further, past the static posting of code. His idea, which he tossed around for 6 months, finally came to [...]

  8. Holy bad ass Batman! Nice one Remy.

  9. This is a great idea. This reminds of me of the interactive slides John Resig was doing.

  10. Nice idea and execution on this. Saw the post over on ajaxian.

  11. One of the most annoying issues when pasting code from a project to some pastebin is indenting. I need to be able to paste a block of tab-indented code, and shift-tab to fix the tabs, usually removing one or two levels. That would be a killer-feature!

  12. Great work Remy!

    Really useful tool. I read about this on Ajaxian a while back, but only just started playing with it this morning. It’s a great tool for playing around with libraries.

    I have 1 Enhancement Request:

    If it’s not too much, a “Send Link” option would be nice to allow easily emailing the link to someone else or yourself?

    And 1 Minor Bug:

    It seems that if you have single-quoted information in the JavaScript tab, it may cause script execution problems when viewing the Output tab. I’ve seen the problem in Firefox 3.0.3 and Opera 9.61 both on Mac OS X; Safari doesn’t show a problem. Here’s an example of code using single-quotes; notice the ‘$’ in line # 15′s comment:

    http://jsbin.com/ogeti/edit/

    Changing ‘$’ to ‘$” or “$” works fine as shown here:

    http://jsbin.com/efoce/edit/

    If you click the Output tab for both you’ll see the difference.

    Thanks again for the great tool! I plan to use this pretty often :-)

  13. Hi Remy,

    I have a simple suggestion for JSBin: people often remove the script tag with the %code% marker. Maybe you could change the “we run in the footer” message to include a “don’t remove this!” warning, or maybe inject the script dynamically on the output tab, avoiding user errors. Newbies do this all the time when using JSBin for the first time.

    cheers!

  14. I love this! This is amazing. However, if you just added a copyright and opened the source, a ton of people would find out about this from other people’s sites. Open the source dude!

  15. Great App – Would be nice if it will be enhanced. (userlogin, share with oder users, private script a.s.o)

    If I understand right, everyone can edit every URL as soon as he knows the extension, which are a 5 length literal string.

    In my opinion thats an open door for a bad commercial or malware-code script even if it has to run 26^5 times on jsbin.

    It may be a bit less userfriendly, but the “hash” url should be longer or more difficult (e.g. numbers or UPPERcase letters)

  16. Videos from General introduction and Ajax debugging don’t load anymore (at least in Chrome and Firefox)

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight