Edge Inspect – Accessibility Update

Edge Inspect update improves Accessibility

Look for an update notification in the Edge Inspect Chrome Extension, with a link to download the new version. Our Android and iOS clients have also been updated.

This new version includes bug fixes, accessibility improvements, and the final work needed to complete our Japanese localization.

For the accessibility improvements in this new release, we partnered with Adobe’s Accessibility team who provided us with code, and expert guidance. Read more about it on the Adobe Accessibility Blog.

Update: This version has a noteworthy change: When you first launch the new Edge Inspect desktop application, it presents a dialog saying that the Edge Inspect Chrome Extension is trying to connect, and asks you to allow the connection. It is a very quick step, but is required for the Edge Inspect Chrome Extension to be able to talk to the Edge Inspect desktop application.

We hope you’re enjoying using Edge Inspect. Please take the time to provide our team with feedback through one of the following methods:
Edge Inspect survey
 

 
 
Bruce Bowman
Edge Inspect product manager
twitter: @brucebowman, @edgeinspect

Posted in Announcements, Minor Feature Release | Tagged , , , | Comments Off

How to clear the mobile browser cache in Edge Inspect

How to clear the mobile browser cache in Edge Inspect

Let’s review the mobile browser cache in Edge Inspect, why it exists and how and why you would want to clear it.

What’s a “cache” and why I should I clear it?

A website is actually a composition of dozens, hundreds or even thousands of files. Even websites supremely optimized for speed are downloading many files so your browser can render them locally. The first time a site is downloaded, its files are saved into the browser cache. The next time the site is loaded the browser and server negotiate; only the changed assets are fetched. The browser uses unchanged files from the cache, which can have a dramatic impact on the page load time.  The mobile browser in Edge Inspect also makes use of caching.

extension_callouts

It sounds like caching is a good thing, so why clear the cache?

Mobile browser caches are notoriously sticky – meaning they hold on tight to assets that should be replaced by newer ones. This causes a lot of problems (and frustration) when you’re developing your site, frequently making changes and refreshing the browser to check your work. Clearing the cache on a mobile device can mean having to traverse several levels deep into the settings to find the control that clears the cache. And those controls are often in different places on different devices, adding to the time and frustration – just to test a simple change!

How do I clear the cache in Edge Inspect?

Edge Inspect provides the Refresh All Devices feature to clear the cache for all connected devices. With a single click on this button, each device’s cache will be cleared, and the page will be reloaded with the freshest assets.  This feature is simple, efficient and time-saving, especially when using multiple devices. If you’d like to test a change on just one device, Edge Inspect provides a device specific Refresh command. You’ll find the Refresh button in the Action menu in the upper right corner of your device. (If you are viewing full screen on your device, you’ll need to toggle off full screen in order to see the Action menu.)

Edge Inspect Action menu on iOS and Android

I hope you are more productive using the Refresh All Devices command in Edge Inspect!

Archna Panwar
Software QE Developer
Edge Inspect team

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

Edge Inspect updated with Japanese localization

Edge Inspect is now localized into Japanese

Today we released updates to The Edge Inspect Chrome extension, iOS and Android clients that include Japanese localization, bug fixes and some minor improvements. Please note that the Edge Inspect application that runs on your Mac or Windows computer has not yet been localized into Japanese. We will be releasing a new version early in 2013 that will display Japanese UI.

Please help us raise awareness for Edge Inspect by telling a friend. We have a couple of new videos that will help them see the value in just a few minutes. This introduction from Paul Trani is a great overview, and this screencast from Christophe Coenraets demonstrates the power of the features. Finally, the December 2012 issue of INSPIRE magazine has a story about Edge Inspect.

Season’s Greetings from the Edge Inspect team!

Bruce Bowman
Edge Inspect product manager
twitter: @brucebowman, @edgeinspect

Posted in Minor Feature Release | Comments Off

Edge Inspect updated for iOS 6 and iPhone 5 compatibility

Edge Inspect has been updated for iOS 6 and iPhone 5

Today a new version of our Edge Inspect iOS app is available that has a few notable changes:

  • Optimizations for iOS6
  • Full compatibility for iPhone 5 – Edge Inspect on iPhone 5 now uses the entire screen
  • Minimum iOS version requirement is now iOS 4.3

For those of you that have Edge Inspect installed on an iOS version 4.0+ lower than 4.3, your Edge Inspect client will continue to work, but can no longer be updated. If you have a device that is running one of these older OS versions, but have not yet installed Edge Inspect, you will need to upgrade your OS to at least iOS 4.3 to be able to install Edge Inspect. For more information on this, please visit the Edge Inspect Community Forum.

Bruce Bowman
Edge Inspect product manager
twitter: @brucebowman, @edgeinspect

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

How to Purchase Edge Inspect

How to purchase Edge Inspect

We are aware of some problems you may be encountering when attempting to purchase Edge Inspect. The Creative Cloud team is working on improving the purchase flows, and making the whole process more clear.

Until we get there, here are some more direct links to help you get where you need to go to make a purchase or download Edge Inspect.

Edge Inspect free version

If you are content with just one concurrent device connection at a time, the Edge Inspect free version may be all that you need. A free Creative Cloud membership is required, then you can download and use Edge Inspect in free mode. Go to the Creative Cloud Plans page and choose the Get Started option.

Purchase a Edge Inspect subscription

If you’re interested in purchasing the Edge Inspect subscription, visit: http://adobe.com/go/edgeinspect_upgrade. Choose the Store in the region where you live to start your purchase.

Purchase a Creative Cloud subscription

If you want to purchase Edge Inspect as part of the Creative Cloud, you can join the Creative Cloud by going to the Creative Cloud Plans page and choosing Complete. In addition to all of the Creative Suite tools and services, your Creative Cloud subscription also includes Edge Inspect and the other Adobe Edge Tools and Services.

Existing Creative Cloud subscribers – how to download Edge Inspect

If you’re already a Creative Cloud subscriber, you will not find Edge Inspect in the Adobe Application Manager. Instead, go to the Creative Cloud Apps page (make sure you’re logged in), scroll down to the Edge Tools and Services section, find Edge Inspect and click on Learn More, then Download.

Bruce Bowman
Edge Inspect product manager
twitter: @brucebowman, @edgeinspect

Posted in General News | Tagged | 6 Comments

Edge Inspect + weinre

Using Edge Inspect with a custom local weinre server

The Edge Inspect team provides a weinre server running in the Adobe Creative Cloud that the Edge Inspect Chrome extension uses by default when you choose the remote inspection option. This may not be a viable option for some people for a number of reasons:

  1. You are developing and testing on a wireless network that doesn’t have Internet acces, so you can’t use the Remote Inspection feature.
  2. The pages you’re developing are under NDA or have other IP concerns and cannot be exposed outside of your internal network.
  3. For some unknown reason one or more of your devices just don’t seem to be able to reliably connect to the default weinre server.
  4. You need better performance than you’re able to get using the default weinre server.

With that in mind, we have created some instructions in the Edge Inspect Community Forum to help you get up and running with your own instance of weinre to use with Edge Inspect. Enjoy :)

Mark Rausch
Sr. Computer Scientist
Edge Inspect team

Posted in Workflow enhancements | Tagged , , | 1 Comment

Edge Inspect + JS Bin

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!

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

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 , , , , , , , | 64 Comments

Shadow + xip.io: Virtual Hosts Workflow Simplified

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