Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

JS Bin for Collaborative JavaScript Debugging

DZone's Guide to

JS Bin for Collaborative JavaScript Debugging

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

The weekend before last 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!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Remy Sharp, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}