JSConsole Remote Debugging and JSBin Live Preview

Remy Sharp ( @rem ) recently implemented some really awesome new features to jsconsole.com and jsbin.com that I wanted to share with you.

JSConsole: Remote Debugging

JSConsole.com is a useful tool if you want to play around with JavaScript. You can load another webpage into jsconsole, load external scripts, and then start playing around with them.

However, a really compelling feature that he has added recently is the ability to remotely debug against another browser. Think of the potential of this. You can use jsconsole and remote debug against a jQuery Mobile application or any other website on any other device for that matter!

The process is really straightforward. All you do is type :listen at the jsconsole command line and it will output a unique identifier for you to use in your web application. It even spits out the whole script tag so you can copy/paste it into the web app that you want to remote debug.

/* Example script tag outputted by the JSConsole 
   :listen command that you need to insert into 
   your web application */
<script src="http://jsconsole.com/remote.js?5BDE9731-8EBD-42A8-8D72-CB24878F09A6"></script>

Once you’ve pasted the script into your web app, then you’ll see that a connection has been made in the jsconsole window. It will show the useragent of the browser you’ve just connected to.

When you are connected then you can either enter commands into the jsconsole command line to execute on the remote browser. In addition any console.logs that are invoked on the remote browser will show up in your jsconsole window!

If for some reason you’d rather not use the GUID that JSConsole generates, you can just as easily provide your own “unique identifier” such as myApplication, but you do run the risk that this might conflict with someone else’s “unique identifier”.

NOTE: This debugging tool is intended for debug only and not for production code.

JSBin: Live Preview Pane

Another cool new feature is the “Live Preview” pane in JSBin. Previously, you had to manually click the “Preview” button to preview the result of our JSBin, but now you can see live updates in this new pane.

All you need to do is type the following statement in your browser’s console. After you’ve executed the statement, then JSBin will remember this option by default when you create a new JSBin.

jsbin.livePreview();