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. For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/10/10/previewing-jsbin-output-in-mobile-devices-using-adobe-edge-inspect/

1. Previewing JSBin output in mobile
devices using Adobe Edge Inspect
For the full blog post visit this link:
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)

2. 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

3. 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,
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,

4. 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

5. iPod. The two screenshot shows it,
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,

6. 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.

7. 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

8. 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.

10. 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
Weinre : http://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 Android : http://jbkflex.wordpress.com/2012/04/16/adobe-
shadow-another-way-of-remote-debugging-mobile-web-apps-in-ios-and-android/

11. 3. Use your own Weinre server with Adobe Shadow – Step by
step : http://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
Mueller : http://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-
video-by-patrick-mueller/