Edge Inspect + JS Bin

Posted on October 5, 2012 by Matthew Johnson

An efficient mobile web workflow: Using Edge Inspect with JS Bin

One of the big benefits of Edge Inspect is that it helps to shift the testing of a web site to an earlier point in the development process and can significantly reduce the time and effort required to find, fix, and retest issues. Integrating third party tools like LiveReload with Edge Inspect can improve this feedback loop even further.

With the release of Edge Inspect, we have added integration with JS Bin allowing users to easily view and test their bins on their mobile devices. This blog post is the latest in our Workflow series, which highlights how Edge Inspect integrates with other tools and services to help you work as efficiently as possible.

JS Bin Overview

JS Bin is a powerful, free tool that allows you to create, edit, and share pastebins for your HTML, CSS, and JavaScript. Bins can be edited with their results rendered directly in your browser. This makes it particularly useful for developing simple prototypes and proof of concepts as well as creating test cases in order to help demonstrate and debug a problem with a web site’s rendering.

 

The JS Bin 'Welcome'

 

Using JS Bin with Edge Inspect

Using JS Bin and Edge Inspect is simple – there’s really no additional setup required, just go to JS Bin in Chrome and use JS Bin.

When you first navigate to JS Bin all of your devices connected to Edge Inspect will follow along. Once you start viewing or editing a specific bin, devices connected via Edge Inspect will update to show only JS Bin’s Output view.

Select the JS Bin code panels you’d like to use and create a new bin by clicking ‘JS Bin’ -> ‘New’ and start editing the HTML, CSS, and JavaScript.

 

Creating a new JS Bin bin

 

Not only will Edge Inspect ensure your devices show only the Output, but JS Bin provides live remote rendering for bins so that all of your devices are updated with your latest bin code as you type.

 

Live updates in JS Bin as you type

 

All Edge Inspect features, including Remote Inspection, are still available and can be used to assist in debugging your bins.

Better than pictures, here is a video of Remy Sharp, creator of JS Bin, giving a quick demo of the JS Bin integration with an beta version of Edge Inspect (formerly called Shadow).

Thanks to Remy for working with us to make this integration possible!

If you need to try out some new code, create a test case or fix a bug, the fast feedback loop when using JS Bin with Edge Inspect is a combination that is hard to beat.

Matt Johnson
Sr. Software Engineer
Adobe Edge Inspect

Posted in Workflow enhancements | Tagged , , , , | 2 Comments

Announcing Adobe Edge Inspect!

Posted on September 24, 2012 by Bruce Bowman

Adobe Edge Inspect is available for immediate download and use

Edge Inspect, which was formerly codenamed Shadow, is a new preview and inspection tool for web designers and developers.Adobe Edge Inspect graphic image

Edge Inspect – simplifying mobile web workflows

Edge Inspect allows you to easily pair multiple smartphones and tablets with your computer and enables you to work more efficiently when creating mobile web content. Edge Inspect saves you from having to type URLs in your device’s browser, and remotely controls the devices to stay in sync as you browse in Google Chrome. When you identify a problem on a device, Edge Inspect lets you use remote inspection to inspect the DOM from the device using familiar web inspection tools, and shows changes on the device instantly. Edge Inspect also keeps your devices’ screens from dimming or falling asleep, provides cache clearing, and allows you to easily grab screenshots from all of your devices.

Edge Inspect is part of the new Edge Tools and Services which is a set of offerings for web designers and developers looking to create beautiful mobile-ready content and apps with HTML, CSS, and JavaScript. Focused on specific tasks, Edge Tools and Services work well together, individually or with other tools to design, animate, code, package, and deliver content and apps.

Get Edge Inspect now!

You can can get started with all the Edge Tools and Services by signing up for a free or paid Creative Cloud membership.

If you’re already a Creative Cloud member, you can download and begin using the full version of Edge Inspect and the other Edge Tools and Services today, at no additional charge – they’re included with your Creative Cloud membership.

If you are not yet a Creative Cloud member, you can join for free, and begin enjoying the benefits of the free Creative Cloud membership, which includes the free version of Edge Inspect.

The Edge Inspect Chrome Extension, iOS app and Android app will become available in the various marketplaces throughout the day. The Edge Inspect app for Kindle Fire devices will be available tomorrow. If you check and find that they are not yet available, check back a little later.

Edge Inspect free vs. Edge Inspect full version

The Edge Inspect full version does not limit the number of concurrent device connections you can have. The free version has access to all of the full version features including Synchronous Browsing, Remote Inspection, Screenshots, cache clearing, localhost support, HTTP authentication, and HTTPS support – but is limited to one concurrent device connection. We hope this will allow you to use all of the features of Edge Inspect, and determine whether an upgrade is right for you.

To use the full version of Edge Inspect and connect an unlimited number of devices, a paid Creative Cloud membership or an upgrade to the full version of Edge Inspect at USD $9.99/month is required.

Join the Edge Inspect community!

Join the conversation with the Edge Inspect community on our new Community Forums. Exchange best practices, learn from others, discuss web development, and get assistance with questions. It’s your community too, so come join the conversations.

We hope you enjoy using Edge Inspect as much as we enjoyed making it for you.
– the Edge Inspect team

Posted in Announcements, Major Feature Release | Tagged , , , , , , , | 7 Comments

Shadow is now Adobe Edge Inspect

Posted on September 23, 2012 by Bruce Bowman

The Shadow free preview period is ending

We’d like to thank you for using Adobe Shadow during its free preview period on Adobe Labs. On September 24, 2012, we will announce and ship Adobe Edge Inspect, which will replace Adobe Shadow. Here’s what you can expect during this transition:

  1. On September 24, 2012, your Shadow Chrome Extension will be replaced by the Edge Inspect Chrome Extension. It will have an “In” badge icon in place of the Shadow “Sd” badge. The Edge Inspect Chrome Extension will continue to work with your version of Shadow until Shadow expires on October 31, 2012.
  2. Your Shadow iOS and Android apps will be updated to Edge Inspect when you update your device’s apps. The Edge Inspect iOS and Android apps will continue to work with your version of Shadow until Shadow expires on October 31. After that, your Shadow software will no longer accept device connections.
  3. You’ll need to upgrade your Shadow software on your computer to Edge Inspect. You can do this immediately, or continue to use Shadow until it expires.

Edge Tools and Services

Edge Inspect is part of the new Adobe Edge Tools and Services. You can can get started with all the Edge Tools and Services by signing up for a free or paid Creative Cloud membership.

If you’re already a Creative Cloud member, you can download and begin using the full version of Edge Inspect and the other Edge Tools and Services today, at no additional charge – they’re now included with your Creative Cloud membership.

If you are not yet a Creative Cloud member, you can join for free, and begin using the benefits of the free Creative Cloud membership, which includes the free version of Edge Inspect.

Edge Inspect free vs. Edge Inspect full version

The Edge Inspect full version does not limit the number of concurrent device connections you can have. The free version has access to all of the full version features including Synchronous Browsing, Remote Inspection, Screenshots, cache clearing, localhost support, HTTP authentication, and HTTPS support – but is limited to one concurrent device connection. We hope this will allow you to use all of the features of Edge Inspect, and determine whether an upgrade is right for you.

To use the full version of Edge Inspect and connect an unlimited number of devices, a paid Creative Cloud membership or an upgrade to the full version of Edge Inspect at USD $9.99/month is required.

Join the Edge Inspect community!

Join the conversation with the Edge Inspect community on our new Community Forums. Exchange best practices, learn from others, discuss web development, and get assistance with questions. It’s your community too, so come join the conversations.

Posted in Announcements, Major Feature Release | Tagged , , , , , , , | 63 Comments

Shadow + xip.io: Virtual Hosts Workflow Simplified

Posted on June 19, 2012 by Matthew Johnson

With the recent introduction of xip.io from 37signals, using Shadow with local virtual host configurations just got much easier.

In a previous post we described how you could configure Shadow and Charles Proxy to support the testing of virtual hosts in Shadow. This method required configuring your virtual hosts in your web server, editing your local hosts file (e.g. /private/etc/hosts), setting up Charles Proxy, and modifying the settings on your mobile device. Using xip.io you need only configure your virtual hosts appropriately and use a xip.io URL when testing – no other configuration required.

Setting up Virtual Hosts for xip.io

The following describes how to configure virtual hosts in apache2 and should apply to OSX Web Sharing and most MAMP/XAMP/WAMP installs. For other web servers there should be step-by-step guides available to achieve the same setup.

  1. Enable Virtual Hosts. In your httpd.conf uncomment the following line by removing the #. Note that the path in this include may vary depending on your specific installation.
    #Include /private/etc/apache2/extra/httpd-vhosts.conf
  2. Define Virtual Hosts. In the httpd-vhosts.conf file referenced by the Include, declare your virtual hosts like below. Here we are defining two different sites client1 and client2 mapping to two different directories:

        DocumentRoot "/Users/matthewj/Sites/Client1"
        ServerName client1
        ServerAlias client1.*.xip.io

        DocumentRoot "/Users/matthewj/Sites/Client2"
        ServerName client2
        ServerAlias client2.*.xip.io

    The key to this virtual host configuration is the ServerAlias parameter which provides alternate URLs the server should map to the site.

  3. Restart your server. After adding the virtual host configuration you must restart your web server so that it picks up the changes. With OSX Web Sharing, just uncheck and recheck the Web Sharing box. For MAMP/XAMP/WAMP, use the admin tools provided.

Test your Sites With Shadow

When testing with Shadow, instead of using the http://client1 or http://client2 addresses in Chrome, use the xip.io address http://client1.10.0.0.1.xip.io and http://client2.10.0.0.1.xip.io where the 10.0.0.1 address is replaced by your machine’s IP (you can find this IP address in the Shadow Chrome extension popup). All devices will be able to follow along with no additional configuration required on the desktop or device.

Matt Johnson
Sr. Software Engineer
Adobe Shadow

Posted in Workflow enhancements | Tagged , , , , , , | 17 Comments

Shadow – Labs Release 3 Now Available

Posted on June 17, 2012 by Bruce Bowman

Adobe Shadow Labs Release 3 now available on Adobe Labs

Shadow has been updated on Labs, the iTunes Store, Google Play market, Chrome Web Store and Android App Store for Android. Important: The entire Shadow system must be updated, as we covered in a previous post. If you need help with updating, please ask on the Shadow Community Forums.

New Features in Shadow Labs Release 3

Screenshots — Screnshots can now be cpatured from any or all Shadow devices, and are returned to the computer. Use the Action menu on Shadow devices to take one screenshot. Use the Chrome Extension to click a single button to grab screenshots from all your connected devices. Screenshots are stored in ../username/Documents/Shadow/ on OSX, and ..usernameDocumentsShadow on Windows.

Cache Management — Use the Pull to Refresh gesture on Shadow devices to clear the cache on one device, and the Refresh All button in the Chrome Extension to clear the cache for all connected Shadow devices.

HTTPS Support — Use unsigned SSL certificates during development. Connected Shadow devices will now provide a dialog prompting you to accept an unsigned certificate.

If you’d like to see the new Labs Release 3 features in action, check out our new AdobeTV video.

Please try Shadow Labs Release 3 and let us know what you think on the Shadow Community Forums. We’re listening, and your feedback is important to us as we build the next versions of Shadow.

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , , , | 1 Comment

Shadow Update to Labs Release 3 Coming

Posted on June 13, 2012 by Bruce Bowman

On Friday June 15, in the late afternoon Pacific time, we will begin rolling out an update to the Shadow infrastructure. This update will require everyone using Shadow to update their software, on their computers and their devices.

For those of you who are working on deadline, we apologize if this is bad timing for you. We’re pushing the updates on a Friday afternoon in an attempt to minimize the impact. It is necessary to complete the update process before using Shadow again.

Shadow is deployed to the Chrome Web Store, Google Play market, iTunes Store and Amazon Appstore for Android. These marketplaces are not in our control, so propagation may take some time. Please be patient and try again if the updated mobile apps are not yet available.

This process will start automatically for you. Here’s what you can expect:

  1. Your Chrome Extension will be automatically updated by the Chrome Web Store. Once that happens, the next time you go to use the Shadow Chrome Extension, you will be notified that a major update is required. A link will be provided to take you to the new version of Shadow on our Adobe Labs site. If you would like to jumpstart this process, you can force the extensions to be updated by going to chrome://chrome/extensions/, then clicking the “Update extensions now” button. Once the Shadow Chrome Extension has been updated, Shadow will not work for you until you complete the following steps. If you have Chrome Sync enabled, all of your Chrome browsers will get the updated Shadow extension.
  2. On our Adobe Labs page, you will be able to download the new version of Shadow. Once the download is complete, you’ll need to install the new version. Double-click the .dmg or .exe file to begin, and follow the prompts to complete the installation. It is not necessary to uninstall or remove the currently installed version of Shadow.
  3. Next, you need to update the Shadow software on your devices. You can do this by going to the marketplace for your devices, and starting the update process. You can do this on your computer, or on your device, whichever you prefer or is appropriate.
  4. It will be neessary to pair your devices, as the previous authorization will not be remembered.

Once you have paired your devices, you will be able to begin using Shadow normally again.

The new version of Shadow is more reliable, and has some new features that we think you’re going to like, so this update should be worth your time and effort. We’ll tell you more about the new features in a few days – we don’t want to ruin the surprise!

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , | 2 Comments

Shadow + Typekit + localhost workflow

Posted on June 4, 2012 by akishnan

Using Adobe Shadow with Typekit for local development workflows

If you’re using Typekit in your web projects, this article will show you how to use Adobe Shadow to preview your Typekit webfonts on devices during your development workflows.

Note: This post assumes you already have a Typekit account, and have created a Typekit Kit.

Shadow and localhost

In order to preview http://localhost content on your Shadow devices, Shadow does a translation of the URL when instructing Shadow devices to preview your content. E.g., if your site is at http://localhost/~akishnan/meridien/index.html, before it sends the URL to Shadow devices, it replaces localhost with the IP address of the machine where Shadow is running. This is necessary because localhost is relative. In our example, Shadow would tell devices to go to http://192.168.1.104/~akishnan/meridien/index.html.

One of the side-effects of this translation is that Typekit fonts which are registered under localhost do not work on Shadow devices.

Let’s fix this, so everything works the way you want it to…

Add your IP address to your Font Kit Settings

  1. Login to Typekit
  2. In the top right, choose one of your Kits from the menu, then click Launch Kit Editor
  3. You will see your Type Kit Editor, click on Kit Settings in the upper right
  4. In the Domains field, add your current IP Address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension
  5. Click on Save Settings
  6. Click on Publish (wait 10-15 minutes for propagations across the Typekit servers)
  7. Click on Embed Code in the upper right, then copy and paste your code snippet inside the head tag in your web page(s). E.g.:


    8. try{Typekit.load();}catch(e){}

  8. Apply your Typekit font to html elements on your web page

    9. .fancyH2 {
    font-family: "cabazon";
    padding-top: 1em;
    color: #FFF;
    }

  9. Preview your page in Chrome. Shadow devices will now also display your Typekit fonts!

You can repeat this procedure to change your IP address and republish your Typekit Kit as often as necessary, with no penalties.

We hope you enjoyed this article, and welcome your feedback in the comments.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow

Posted in Workflow enhancements | Tagged , , , , , | 5 Comments

Shadow + Charles Proxy: Virtual Hosts Workflow

Posted on May 16, 2012 by akishnan

Virtual Hosts workflow for Adobe Shadow

We’ve heard many requests to enable Shadow to work in workflows that are using local Virtual Hosts. For many technical reasons, this is difficult accomplish in Shadow without additional machine specific configurations. We recommend a workflow that uses Charles Proxy. Charles is a popular tool mostly known for its ability to simulate bandwidth throttling, but it can also serve to resolve virtual hosts.

This blog post is for people who are already using virtual hosts in their workflows, and describes how you extend those workflows to include Shadow devices.

Setting up a Virtual Hosts Directory

You may skip this section if you have already have local virtual hosts set-up in your environment.

  1. Enable virtual hosting in httpd.conf by uncommenting the below line. See detailed instructions for Mac OSX or MAMP/XAMP and step-by-step guides to defining virtual hosts for your respective environment. You will also need to add the virtual hosts to your /private/etc/hosts file (also covered in these guides).
    Include /private/etc/apache2/extra/httpd-vhosts.conf
  2. Define your Virtual Host directories. In /private/etc/apache2/extra/httpd-vhosts.conf, our example snippet declares two virtual hosts “citrus.demo.com” and “meridien.demo.com” mapped to two different directories:

 

DocumentRoot “/Users/akishnan/Sites/Citrus”
ServerName citrus.demo.com

DocumentRoot “/Users/akishnan/Sites/meridien”
ServerName meridien.demo.com

 

Configure Charles Proxy

  1. If you don’t already have it, download Charles Proxy and launch it
  2. Make a note of your computer’s IP address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension). The default port number of Charles Proxy is 8888

Configure the HTTP Proxy on Android devices

  1. On your Android device, go to Settings > Wifi (the exact path varies by device and OS version)
  2. Press and hold on the wireless network to which your Shadow clients are connected
  3. Tap “Modify Network”
  4. Check “Show Advanced Options”, Choose Proxy Settings “Manual”
  5. Enter the IP address* of the machine where Charles Proxy is running (you made a note of this above)
  6. Save your changes

*NOTE: if your machine’s IP address changes, you will need to repeat step 5 for each device.

Configure the HTTP Proxy on iOS devices

  1. On your iOS device, go to Settings > Wifi
  2. Tap on the blue arrow next to the name of your current wireless network
  3. Turn on HTTP Proxy and choose Manual
  4. Enter the IP address* of your computer where Charles Proxy is running
  5. Enter 8888 as the “Port”


*NOTE: if your machine’s IP address changes, you will need to repeat step 4 for each device.

Shadow & Virtual Hosts

  1. Start Shadow on your devices (Android and iOS)
  2. In Chrome, browse to one of your virtual host URLs, e.g., http://citrus.demo.com/ or http://meridien.demo.com/
  3. You will see a permission prompt from Charles to allow the mobile device’s IP to connect using the Charles proxy: Choose “Allow”. You will see this permission prompt once for each connected Shadow device.
  4. Paired Shadow devices are now able to see your virtual host URLs!

Charles Proxy Permission Dialog

Note: If your IP address changes, you will be prompted once again.

In a future blog post, we’ll cover how to use the Charles Proxy Bandwidth Throttling features with Shadow so you can simulate slower connection speeds on Shadow devices.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow

Posted in Workflow enhancements | Tagged , , , , , | 7 Comments

Shadow + LiveReload workflow

Posted on April 24, 2012 by Bruce Bowman

A Typical (tedious) Web Design Workflow

If you’re a front end web developer, your daily workflows probably look something like this:

  1. Put your files on a web server (either remotely or on your local computer)
  2. Load the page in a browser
  3. Check, and see that it isn’t quite right
  4. Make a change (e.g., a CSS tweak or an image edit)
  5. Save
  6. Switch back to the browser
  7. Reload the page
  8. Repeat steps 4 – 7 about 100 times

As you add a device to your workflow, the problem gets compounded because you now have to touch the device each time you make a change. Add more than one device, and you are sure to develop some wrist problem due to repetitive stress injuries.

Of course Shadow helps you with its synchronous browsing feature, but what if Shadow devices were also automatically refreshed as soon as you Save after a change? We want to make sure you know about a pretty cool tool that works well with Shadow – it’s called LiveReload, and it can further improve your workflows.

LiveReload

LiveReload, as you’ve probably guessed, reloads the page for you as soon as you Save. When you make a change to a CSS file or an image, the browser is updated instantly without having to switch to the browser to reload the page. It does this by watching your filesystem for changes in your project files.

Using Shadow and LiveReload together

  1. Launch LiveReload
  2. Click the + button at the bottom, and add the site folder you want LiveReload to monitor
  3. Paste this code into the HEAD tag of your html – replace the 192.168.1.104 IP address with your machine’s current IP address (see Things To Be Aware Of section below)

    4. <!-- inject LiveReload script -->
    <script src="http://192.168.1.104:35729/livereload.js?snipver=1"></script>

  4. Browse to the URL of your page in the Chrome browser on your desktop (e.g., http://localhost/meridien/index.html)
  5. Connected Shadow devices will follow along using Shadow’s synchronized browsing feature
  6. Make a small CSS tweak in a .css file in the site folder you asked LiveReload to monitor in step #2, and Save the change
  7. Watch your Shadow devices (iPod, iPhone, iPad), and see the changes appear automagically
  8. If you load that same URL in other browsers, they will also benefit form LiveReload.

Things To Be Aware Of

  • For step 3 only, using ‘localhost’ won’t work – LiveReload requires using your machine’s current IP address. The current IP address is conveniently displayed at the bottom of the window in the Shadow Chrome Extension.
  • Also regarding step 3, it is necessary to use the LiveReload script in your files if you want to see updates on your Shadow devices. LiveReload has optional browser plug-ins, but those can’t be used with devices.
  • LiveReload uses “WebSockets” to propogate changes. As of now, the Android WebView does not support Web Sockets so this currently only works for connected Shadow iOS devices. You can check When Can I Use to verify this.
  • Keep an eye on the roadmap for LiveReload to see what they’re planning next.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow team

Posted in Workflow enhancements | Tagged , , , | 4 Comments

Shadow – Labs Release 2 now available

Posted on April 12, 2012 by Bruce Bowman

Adobe Shadow Labs Release 2 is now available on Adobe Labs

We’ve been thrilled and encouraged by the amazing responses we’ve gotten to Shadow! We’ve been busy working on the next version, and believe that Adobe Shadow Labs Release 2 addresses almost all of the issues that you’ve been telling us about:

Localhost URL support

Shadow now works correctly with URLs containing localhost, and 127.0.0.1 on Windows and OSX. In addition, on OSX, it also works with machine.local.

Adobe Edge integration

If you’re using Adobe Edge, the Preview in Browser command now works with Shadow. You’ll see your animations previewing in Chrome, and on all of your Shadow devices. (This requires Chrome to be the default browser)

HTTP Authentication support

You can now browse to URLs that require HTTP authentication, and see the login/password form on Shadow devices. If your URL contains the login id/password, then Shadow devices will authenticate without the form. (e.g., using a URL like: http://login:password@mysite.com)

Support for iPad (3rd Generation)

Shadow now includes high resolution application assets for the Retina Display on the new iPad. We’ve included a couple of other miscellaneous fixes to improve iPad (3rd Generation) compatibility.

Improved workflows for sticky caches

You can now use a Refresh gesture on Shadow devices (tap on the page, hold, and pull down until you see the “Release to refresh…” message). This will reload your page, using the freshest assets.

Amazon Kindle Fire support

Shadow will soon be is now available in the Amazon Appstore for Android, allowing easy installation on Kindle Fire devices.

URL Monitoring

Pages/apps that change URL parameters or navigate to new states using ‘#’ anchors now work correctly. Shadow monitors the Address Bar in Chrome, and sends updates to Shadow devices as they happen. This includes jQuery Mobile single page apps.

Note: Shadow for iOS (v1.0.184) will be is now available on the iTunes Store soon. The changes listed above require this new version.

Be sure to update all of the different Shadow pieces to take advantage of the goodness in Labs Release 2.

What we did not do

One thing that we’ve heard loud and clear, is that Shadow needs to work with virtual host file workflows. We were not able to deliver a solution to this in Labs Release 2, but understand that this is a very important feature for many of you, and are working on a solution. This is tricky, and is going to take some time for us to address properly. Please be patient with us – we’ll get to this as soon as we can.

Please try Shadow Labs Release 2 and let us know what you think on the Shadow Community Forums. We’re listening, and your feedback is important to us as we build the next versions of Shadow.

Enjoy!

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , , , , , , , , | 8 Comments