Previewing JSBin output in mobile devices using Adobe Edge Inspect

When Adobe renamed Shadow to Edge Inspect, one of the major changes that happened was the integration of JSBin into Edge Inspect. What this means is that whatever proof of concepts (also called Bins as per JSBin terminology) you have created with JSBin, you can remotely preview it directly in your mobile devices without any additional set up required.

If you haven’t tried JSBin yet, then let me introduce it to you. JSBin is a free online tool with which you can create HTML based small POC’s, test examples or I should say small mockup kind of applications. You can edit the HTML, CSS, Javascript and see the changes real time in your browser itself. JSBin is kind of a development environment wherein it has the HTML, CSS and JS editors where you write code for your example app. It also has the console panel for viewing javascript console logs and the the Output panel for previewing the result of your code. All these panels are integrated into one place and as you make changes to your code you can see the result in real time. Very handy. I found it useful for my mobile web apps. But then it is a tool which is on the small scale development side. So it doesn’t have all the fancy features of a typical IDE. Once you create your POC’s or Bins you can even share them. So in case JSBin sounds interesting to you, go ahead and start using it. Create your account at http://jsbin.com/ and start making some apps. The interface looks like the image shown below, (all the help can be found online at jsbin.com)
Click to see larger image
Coming back to remotely previewing JSBin outputs on mobile devices, Adobe Edge Inspect is going to take care of that. So first open your JSBin Bins in Chrome. Start Edge Inspect in your computer. Pair your mobile device with your computer. After your mobile device is paired and connected you will be seeing the Bin output directly in your mobile device. As you go on to make changes in your Bin in Chrome, the changes are reflected in your paired mobile device as well. In case you are not sure of how to pair mobile devices with your computer using Edge Inspect/ Shadow and remotely preview mobile web apps, you can start here.

This post is not a tutorial on Edge Inspect/Shadow or how to use JSBin. Rather, in this post I am going to run through a series of screenshots with explanation on how I used JSBin to create a simple app and then previewing the changes in mobile device using Edge Inspect. So let’s get started,

I created a very simple example with two div elements and then giving them some background colors. All the HTML, CSS have been compiled in JSBin by browsing to JSBin in Google Chrome. The output is shown on the right. The screenshot below shows it
Click for larger image
Using Edge Inspect I have paired my iPod touch with my computer and as a result my iPod touch browses in sync with my computer. As I said earlier, I have opened JSBin in Chrome, since Edge Inspect is compatible only with Chrome. Now that my mobile is connected to my computer, whatever link I browse in Chrome it is opened in my iPod also. So I can see the output in my iPod as well. This is how it looks,
JSBin POC on my iPod
You may notice the app is not scaled up properly in my iPod. That’s because I have not added the viewport meta tag in my HTML. So let’s add the viewport tag in JSBin,

viewport meta tag added in HTML panel - JSBin

And immediately Edge Inspect responds by reflecting the changes in my iPod. This is how it looks now,

The app scales up nicely to device width because of the meta tag in JSBin. Next I made some changes to the CSS – changed the width property to 50% for the div blocks. The output was immediately rendered in JSBin and also my iPod. The two screenshot shows it,
CSS change in JSBin CSS change in iPod Then I made a change in the HTML code. I added a text node to the second div. The result was rendered in JSBin as well as my iPod immediately. The two screenshots below shows it,
And then finally I added some javascript in JSBin for my example. I added a click event to the first div – div1. When clicked it will display a log message in the console panel. I first tested this out in JSBin itself and the screenshot below shows my findings, you can see the console messages generated in the Console panel.
To test things out remotely in my iPod, I opened the weinre web inspector in my computer by clicking on Remote Inspection in the Edge Inspect Chrome extension. Then I opened the Console tab and clicked/tapped on Div1 in my iPod. I  instantly saw the console messages being printed in the weinre web inspector,

So I was able to generate console messages remotely from my iPod. Now, to actually debug and inspect the JSBin app in my mobile I can use the weinre web inspector to remotely test it. Opening the Elements tab in web inspector shows the HTML structure of the app. And then selecting any element in the weinre web inspector will immediately highlight the element in the iPod. The two screenshot below shows it. You can make changes to the HTML, CSS and see the results directly in your mobile device. I will not go into debugging and testing as my previous post talks on this.
Edge Inspect running in Chrome actually sends and opens the preview URL of your Bins (JSBin app) in the paired mobile devices. This is how you actually see the results in your mobile device. The preview URL and the browser preview of your Bin can be seen by clicking on the Preview button inside JSBin. The screenshot below shows it.

These were some of the use cases that I have tried to cover. With JSBin integrated to Edge Inspect you can preview your Bins in your paired mobile devices and remotely inspect and debug them. When you make changes to your Bins in Chrome they are updated in your paired devices too. So whatever you create in JSBin you can live preview it in your mobile devices as well.

Here is the official blog post from Adobe that talks on JSBin and Edge Inspect – http://blogs.adobe.com/edgeinspect/2012/10/05/edge-inspect-js-bin/

And below are some of my previous posts that should help you get started with Edge Inspect, Weinre and mobile web debugging in general

  1. Debugging mobile web applications remotely with Weinrehttps://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
  2. Adobe Shadow – another way of remote debugging mobile web apps in iOS and Androidhttps://jbkflex.wordpress.com/2012/04/16/adobe-shadow-another-way-of-remote-debugging-mobile-web-apps-in-ios-and-android/
  3. Use your own Weinre server with Adobe Shadow – Step by stephttps://jbkflex.wordpress.com/2012/08/28/use-your-own-weinre-server-with-adobe-shadow-step-by-step/
  4. WEINRE – Web Inspector Remote Video by Patrick Muellerhttps://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s