Previewing JSBin output in mobile devices using Adobe Edge Inspect


Published on

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:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Previewing JSBin output in mobile devices using Adobe Edge Inspect

  1. 1. Previewing JSBin output in mobiledevices using Adobe Edge InspectFor the full blog post visit this link:When Adobe renamed Shadow to Edge Inspect, one of the major changes thathappened was the integration of JSBin into Edge Inspect. What this means is thatwhatever proof of concepts (also called Bins as per JSBin terminology) you havecreated with JSBin, you can remotely preview it directly in your mobile devices withoutany additional set up required.If you haven’t tried JSBin yet, then let me introduce it to you. JSBin is a free online toolwith which you can create HTML based small POC’s, test examples or I should saysmall mockup kind of applications. You can edit the HTML, CSS, Javascript and see thechanges real time in your browser itself. JSBin is kind of a development environmentwherein it has the HTML, CSS and JS editors where you write code for your exampleapp. It also has the console panel for viewing javascript console logs and the the Outputpanel for previewing the result of your code. All these panels are integrated into oneplace and as you make changes to your code you can see the result in real time. Veryhandy. I found it useful for my mobile web apps. But then it is a tool which is on thesmall 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 JSBinsounds interesting to you, go ahead and start using it. Create your accountat and start making some apps. The interface looks like the imageshown below, (all the help can be found online at
  2. 2. 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
  3. 3. 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,
  4. 4. 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
  5. 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. Theresult was rendered in JSBin as well as my iPod immediately. The two screenshotsbelow shows it,
  6. 6. And then finally I added some javascript in JSBin for my example. I added a click eventto the first div – div1. When clicked it will display a log message in the console panel. Ifirst tested this out in JSBin itself and the screenshot below shows my findings, you cansee the console messages generated in the Console panel.
  7. 7. 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
  8. 8. 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.
  9. 9. 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- 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 : Adobe Shadow – another way of remote debugging mobile webapps in iOS and Android :
  10. 10. 3. Use your own Weinre server with Adobe Shadow – Step bystep : WEINRE – Web Inspector Remote Video by PatrickMueller :