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.
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
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,
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,
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,
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
- Debugging mobile web applications remotely with Weinre: http://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
- 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/
- 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/
- WEINRE – Web Inspector Remote Video by Patrick Mueller: http://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/