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.
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/
Published on: Mar 4, 2016
Transcripts - Previewing JSBin output in mobile devices using Adobe Edge Inspect
Coming back to remotely previewing JSBin outputs on mobile devices, Adobe EdgeInspect is going to take care of that. So first open your JSBin Bins in Chrome. StartEdge Inspect in your computer. Pair your mobile device with your computer. After yourmobile device is paired and connected you will be seeing the Bin output directly in yourmobile device. As you go on to make changes in your Bin in Chrome, the changes arereflected in your paired mobile device as well. In case you are not sure of how to pairmobile devices with your computer using Edge Inspect/ Shadow and remotely previewmobile web apps, you can start here.This post is not a tutorial on Edge Inspect/Shadow or how to use JSBin. Rather, in thispost I am going to run through a series of screenshots with explanation on how I usedJSBin to create a simple app and then previewing the changes in mobile device usingEdge Inspect. So let’s get started,I created a very simple example with two div elements and then giving them somebackground colors. All the HTML, CSS have been compiled in JSBin by browsing toJSBin in Google Chrome. The output is shown on the right. The screenshot belowshows it
Using Edge Inspect I have paired my iPod touch with my computer and as a result myiPod touch browses in sync with my computer. As I said earlier, I have opened JSBin inChrome, since Edge Inspect is compatible only with Chrome. Now that my mobile isconnected to my computer, whatever link I browse in Chrome it is opened in my iPodalso. 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 notadded 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 ishow it looks now, The app scales up nicely to device width because of themeta tag in JSBin. Next I made some changes to the CSS – changed the width propertyto 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. Theresult was rendered in JSBin as well as my iPod immediately. The two screenshotsbelow shows it,
To test things out remotely in my iPod, I opened the weinre web inspector in mycomputer 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 sawthe 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 toremotely test it. Opening the Elements tab in web inspector shows the HTML structureof the app. And then selecting any element in the weinre web inspector will immediatelyhighlight the element in the iPod. The two screenshot below shows it. You can makechanges to the HTML, CSS and see the results directly in your mobile device. I will notgo into debugging and testing as my previous post talks on this.
Edge Inspect running in Chrome actually sends and opens the preview URL of yourBins (JSBin app) in the paired mobile devices. This is how you actually see the resultsin your mobile device. The preview URL and the browser preview of your Bin can beseen 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 toEdge Inspect you can preview your Bins in your paired mobile devices and remotelyinspect and debug them. When you make changes to your Bins in Chrome they areupdated in your paired devices too. So whatever you create in JSBin you can livepreview 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 EdgeInspect, Weinre and mobile web debugging in general1. Debugging mobile web applications remotely withWeinre : http://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/2. Adobe Shadow – another way of remote debugging mobile webapps 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/
3. Use your own Weinre server with Adobe Shadow – Step bystep : 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 PatrickMueller : http://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/