Edge Inspect Available for Creative Cloud Enterprise Customers

I’m happy to announce that with the most recent update to Edge Inspect version 1.5, Creative Cloud Enterprise customers can now use Edge Inspect as part of their enterprise memberships.

Creative Cloud Enterprise customers can package the Edge Inspect desktop client and deploy it to their organization via the Creative Cloud Packager. You will be able to take advantage of all the great features of Edge Inspect including synchronized browsing, remote debugging, and mobile screenshots.

In order for Edge Inspect for enterprise to work inside of your organization, you’ll need to make sure the Creative Cloud Desktop Application is installed along with Edge Inspect. You’ll also have to separately install the Chrome Extension and mobile client(s) for iOS, Android, and/or Kindle.

For more information about using Edge Inspect as part of Creative Cloud Enterprise memberships, we’ve put together an FAQ that will help address the most common questions.

=Ryan and the Edge Inspect Team
ryan@adobe.com

Posted in General News, Minor Feature Release | Comments Off

Edge Inspect Error with Chrome 30

The current version of the Adobe Edge Inspect CC extension for Chrome is incompatible with Chrome version 30. Chrome 30 introduced an API change that prevents the Edge Inspect extension from communicating with the locally installed Edge Inspect service. We are working on an update to address this issue, but in the meantime you can follow the below instructions for a temporary workaround.

Update Edge Inspect Chrome Extension

The Edge Inspect extension for Chrome is written in JavaScript. By making a simple edit to the source files, you can re-enable communication between the extension and the locally installed service.

  1. Disable the extension.
    Access the Chrome extension management page through the Settings menu or by navigating to chrome://extensions. Uncheck the Enable checkbox for the Adobe Edge Inspect CC extension (version 1.0.424.1). When disabled the extension will appear grey-out.Edge Inspect Extension
  2. Locate inspect.js file.
    Locate the install directory for the Edge Inspect extension for Chrome and edit the inpect.js file. The file can be found in the following directory based on your operating system.
    OSX:
    ~/Library/Application Support/Google/Chrome/Default/Extensions/ ijoeapleklopieoejahbpdnhkjjgddem/1.0.424.1_0/js
    WINDOWS:
    <user home>\AppData\Local\Google\Chrome\User Data\Default\Extensions\ ijoeapleklopieoejahbpdnhkjjgddem\1.0.424.1_0\js
  3. Edit inspect.js file
    Edit line 61 of inspect.js. Remove the "shadow" parameter from the WebSocket constructor call so it looks like this:
    this._wshandle = new WebSocket(this._protocol + "://" + this._host + ":" + this._port + "/");
  4. Enable the extension.
    Access the Chrome extension management page through the Settings menu or by navigating to chrome://extensions. Check the Enable checkbox for the Adobe Edge Inspect CC extension.

Once you make this change, Edge Inspect functionality should be immediately restored. This temporary workaround will let you continue to use Edge Inspect until the desktop application and Chrome extension can be updated. Thanks to Arnold from the Edge Inspect forums for debugging the issue and providing the original solution.

We apologize for the inconvenience and will release a new version of Edge Inspect as soon as possible.

Posted in Announcements | 3 Comments

Edge Inspect integration with Edge Code and Brackets

Edge Inspect is integrated with Edge Code and Brackets

Edge Code and Brackets icons

The Edge Code team has created a new Brackets Extension called the Edge Inspect CC Extension for Brackets. The extension is already included in the new Edge Code CC (Preview) release. This new extension provides the ability to use Edge Inspect to test content directly on mobile devices during development in Edge Code and Brackets. CSS, HTML and JavaScript changes are reloaded when the changes are saved. Once you see your work being updated on your devices while you code, you’ll wonder how you ever coded any other way.

You can download Edge Inspect and Edge Code from the Creative Cloud with a free Creative Cloud membership.

Edge Inspect Extension for Brackets is now Open Source

You may be happy to learn that the Edge Inspect extension is open source with an Apache 2 license. It can easily be added to Brackets – you can grab it by pasting this URL:

https://github.com/edge-code/edge-inspect-extension

into the new Extension Manager (File > Extension Manager…), or download it from the repo on GitHub. We hope to see the community begin using and contributing to the project.
screenshot of Brackets' Extension Manager

 

Try it – see your devices update while you code

Here are a couple of workflows that you can try:

Workflow 1

  1. Edit your code in Edge Code or Brackets
  2. Turn on Syncronized Browsing in the Edge Inspect panel in Edge Code or BracketsEdge Inspect panel seen in Edge Code
  3. Launch Edge Inspect on your devices and connect to your computer
  4. After each file Save (.html, .css or .js) you’ll see the devices reload

Workflow 2

  1. Edit your code in Edge Code or Brackets
  2. Turn off Syncronized Browsing in the Edge Inspect panel in Edge Code or Brackets
  3. Start Live Preview to see the page loaded in Chrome
  4. See Live Highlighting in the browser as you click in CSS elements
  5. See changes to CSS update in Chrome instantly
  6. After each file Save (.html, .css or .js) you’ll see the devices reload
  7. Turn on Syncronized Browsing in the Edge Inspect Chrome Extension
  8. Launch Edge Inspect on your devices and connect to your computer
  9. Note: Live Highlighting does not show on devices – yet

Future improvements

Currently, the port that is used for Live Preview is blocked, so the devices are not updated when using Live Preview. In the future, we hope to have a smoother workflow where the devices will be updated in real-time as you are coding, and doing the right thing whether you’re in Edge Reflow, Edge Code, Brackets or Chrome. We still have some work to do to get where we want to be, but it is already pretty awesome.

Let us know what you think, and help us spread the news by telling someone else who could benefit from these workflows.

Bruce Bowman
Sr. Product Manager, Edge Tools & Services
twitter: @brucebowman, @edgeinspect

Posted in Announcements, Workflow enhancements | Tagged , , , , | Comments Off

Introducing the Edge Inspect JavaScript API

Introducing the Edge Inspect JavaScript API

We’ve had a number of you tell us that you would really like to be able to drive your Edge Inspect devices as part of your continuous integration build process, or from a browser other than Chrome. We’re excited today to tell you that this is now possible, using the new Edge Inspect JavaScript API.

The Edge Inspect JavaScript API represents a subset of the features you see in the Edge Inspect Chrome Extension. Specifically, the API allows you to send URLs to devices and take screenshots. Using the Edge Inspect JavaScript API you can also access a couple of screenshot-related features that aren’t yet available in our Edge Inspect Chrome Extension: Dual Orientation Screenshots, and Full Page Screenshots.

When using Dual Orientation Screenshots, your devices will take a screenshot in whatever orientation they are currently in, auto-rotate 90 degrees, take another screenshot, and then auto-rotate back. This allows you to easily gather both portrait and landscape mode screenshots without having to touch your devices.

When using Full Page Screenshots, your devices will take a screenshot of your entire page (available memory permitting), rather than what’s currently showing in the viewport. If your device doesn’t have enough memory for us to take a full page screenshot, we’ll try to get as much of the page as we can. The meta-data files that come back with your screenshots will tell you how much we got, and if we hit a memory limitation on the device.

Edge Inspect JavaScript API now available

The Edge Inspect JavaScript API is provided under the Apache 2 open source license, and is available beginning today on GitHub. Included are some instructions on how to use the library, and a couple of examples for how you might use it – a simple HTML Test Page, and a Grunt task that uses the library in a node context.

We think there might be cool uses for Edge Inspect that haven’t been discovered, and we hope that this JavaScript library will open the door to explore them. If there is something you would like to see included in the API, let us know.

Tell us how you use the Edge Inspect JavaScript API

If you make something using the API, please tell us about it! You can leave a comment on this blog post, post it in the Community Forums, or tell us on twitter: @edgeinspect@brucebowman or @duaneobrien.

Duane O’Brien
Sr. Computer Scientist, Edge Tools & Services
Twitter: @duaneobrien

Posted in Announcements, Workflow enhancements | Tagged , , , , , | 3 Comments

Edge Inspect CC now available

New Adobe “CC” Creative Cloud apps launched today

You may have noticed that Adobe launched our next generation apps today, rebranded with CC (for Creative Cloud), and a new Edge Inspect CC is among them. Edge Inspect CC icon

Edge Inspect CC Updates

The new Edge Inspect CC consists of updated desktop software for Mac and Windows, updated Android and iOS apps, and an updated Chrome Extension. The Chrome extension will be automatically updated for you, and will remind you that there is a new version of the desktop software. To get the new desktop software, click the link in the Extension to visit the Creative Cloud. Install the new Creative Cloud desktop app, and use it to start downloading and updating your Adobe software.

Once you’ve got the new Edge Inspect CC installed, you’ll notice that all of the improvements are under the hood. We’ve fixed a number of bugs, and spent our time and effort on integration workflows rather than on new user facing features. (If you feel Edge Inspect is missing a feature you really need, please let us know here in the comments, or preferably in the Community Forums.)

Our team worked closely with the Edge Code and Edge Reflow teams to add Edge Inspect integrations. You can now preview your work on your Edge Inspect devices while working in Edge Code and Edge Reflow. Once you try these workflows, you’ll wonder how you ever worked any other way.

Another improvement in this release is to the login workflow. Edge Inspect now shares a single sign-on experience with the Creative Cloud app, so you will no longer need to login to Edge Inspect. This change improves the Accessibility of Edge Inspect, fixing a problem we had with screen readers during login.

New Open Source Edge Inspect JavaScript API

We’ve created a new Edge Inspect JavaScript API for Edge Inspect to allow developers to integrate it more deeply into their custom workflows and build processes. This new API also provides what is necessary to create browser plugins for other browsers, so we are hoping to see the community respond and build some of those. The Edge Inspect JavaScript API is provided free, hosted on GitHub, and under the Apache 2 open source license, so we hope the community will begin contributing to it and making it even better. For more information about the new API, check out this more detailed post from Duane O’Brien.

We hope you’re enjoying Edge Inspect, and finding it valuable in your workflows!

Bruce Bowman
Sr. Product Manager, Edge Tools & Services
twitter: @brucebowman, @edgeinspect

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

Meet the Teams night at Adobe MAX

Tonight at MAX, is Meet the Teams night. Come join us for this annual informal gathering of product managers, engineers, and product marketing teams to network and discuss the products you work most closely with.

Meet the Teams happens on Monday, May 6, 7:00-8:30pm.

Posted in Meet the Team | Tagged | Comments Off

Edge Inspect + WordPress workflow

Using Edge Inspect with a local WordPress installation

A common support request that we field is users wanting the ability to use Edge Inspect with locally hosted WordPress installations.  Because WordPress writes out links and image files using absolute URLs, when you try to preview your content using Edge Inspect everything looks broken.

I had previously published a very kludgy tip to work around this, but thankfully a better solution has since come along.

The Root Relative URLs plugin for WordPress will take those absolute paths that WordPress likes to write out, and change them into relative paths on the fly. This makes it easier to switch between development and production environments, and more importantly for us, makes your locally hosted WordPress site render well on Edge Inspect clients.

You’ll also benefit if you’re testing your local WordPress site using something like LiveReload, CodeKit, or Charles Proxy.

Installing the plugin is easily done through the WordPress plugin interface.  Many thanks to the authors of this very useful plugin.

Duane O’Brien
Sr. Computer Scientist, Edge Tools & Services
Twitter: @duaneobrien

Posted in Workflow enhancements | Tagged , , | Comments Off

How Starwood Hotels & Resorts uses Adobe Edge Inspect

Using actual devices to review mobile websites

At Starwood Hotels & Resorts, Stephen Gates (Vice President and Creative Director for Global Brand Design) and his digital design team are constantly coming up with new ways to best show off their 9 hotel brands. They’ve managed to accelerate their production and gain buy-in from a dispersed global team of designers/developers, strategists and stakeholders – but how? Their entire design studio and clients have started using Adobe Edge Inspect.

picture of Westin mobile site on an iPhone

Starwood customers are accessing hotel, location and accommodation information on many different devices these days. Stephen and his team have a goal to ensure that the mobile web experience is optimal, consistent and fantastic every time – unique to each brand – whether it applies to Westin or W Hotels.

We have been getting some feedback and kudos directly from Stephen about Edge Inspect, and I wanted to share some of his thoughts and insights here as he and his team celebrate the launch of their 9 new mobile web sites.

Congratulations to you and your team Stephen, and thank you for sharing your stories with our readers!

Interview with Stephen Gates, Starwood Hotels & Resorts

Bruce Bowman: How have you and your teams used Edge Inspect?

Stephen Gates: We have found great success in using Edge Inspect two different ways – the first was in the design and development of mobile experiences on multiple devices but also using it to present our design work to our internal clients.

SG: From the design and development perspective we just launched new mobile web sites for our 9 brands in 7 languages and Edge Inspect was key for us to be able to produce that much work in a short amount of time. Our process keeps the entire team involved through the entire life of the project so we need other designers, IA’s, developers, project managers, strategists and all of the team to see the designs and the code as it is being developed. There is no substitute for things like how we don’t need to do full prototypes; we can just load flat images in a quick HTML file. Design ideation and iterations are able to progress incredibly fast since we are able to work like this. Once that work was done we also found it invaluable to then be able to present our work, whether it was static JPEG’s or code, to our clients on an actual smartphone so they could have real interactions with it.

BB: What other tools have you tried while testing on mobile devices?

W Hotels mobile web site homepage

SG: There are browser plugins to mimic screen resolutions, apps that mirror design files from your laptop onto a device and even websites like Responsinator – but none of those really solved the problems we were trying to tackle as well as Edge Inspect did.

BB: When did you start to use Edge Inspect for presentation and reviews?

SG: As a company we moved to designing mobile first about two years ago and both our design and development teams started using Edge Inspect in mid-2012. The development team was using it to help with the coding of our new mobile web sites and my design team was having a problem because when you are designing any mobile experience there is no substitute for being able to see your design on the actual device. We were also having problems because we found some clients would really like a design when they saw it on a big screen but didn’t love it nearly as much when they saw it on an actual device.

SG: Trying to solve these problems made us take a step back to look at our design process and we realized that to be successful we couldn’t just be smart – we also had to be agile. We had to change the way we were working and presenting to be able to quickly see our designs on real devices while we were working on them; we had to test interaction designs by building quick prototypes; and then we had to present that work to our clients in a completely new way so our clients could experience our designs on a device rather than just looking at it from a distance on a larger screen.

SG: Making this change made a huge difference in the creation of our new mobile web sites. It was great when we worked with our amazing developers on building these sites and could see the code on multiple devices simultaneously. It was pretty awesome to see the whole team show up to meetings, pull out their device, open Edge Inspect and see the room full of people going through the designs in real-time, in real size on their own devices.

BB: Was it difficult for you and your teams to convince your organization to adopt Edge Inspect as a standard?

SG: Not that difficult at all because while we are designing and developing it works across platforms and we had to have something like that since everyone on the team has their favorite tools and editors. We have now switched over so that all design reviews for my team and for the entire Starwood mobile team are being done with Edge Inspect. When we decided to roll this out we either emailed everyone ahead of time to install the app on their devices or just took a few minutes at the beginning of the meeting to get it done. After that everyone knew how we were going to be presenting work so they showed up with the app ready to go. Couldn’t be easier and we love it.

Stephen has shared a more complete set of images of their recent work on his Behance portfolio.

For more information about Starwood Hotels & Resorts see https://www.starwoodhotels.com and you can follow Stephen on Twitter: @sdgates or read his Blog for inspiration & ideas: http://blog.stephengates.com/.

Do you have a story about how you’ve benefitted from Edge Inspect? We’d love to hear it, so please leave a comment or get in touch.

Bruce Bowman
Sr. Product Manager, Edge Tools & Services
twitter: @brucebowman@edgeinspect

Posted in Interviews | Tagged , , , | 3 Comments

Edge Inspect at Adobe MAX 2013

Come meet the Edge Inspect team at Adobe MAX

MAX banner iage

I’ve got a way for you to save $300, and get a free 1 year membership to the Creative Cloud – come see us at Adobe MAX! Use registration code MXSM13 and register soon.

The Edge Inspect team will be presenting in the following sessions:

S8186 Advanced Workflows for Mobile Web Design and Development

In this session, I will show you how you can use Edge Inspect in your mobile web workflows. We will give an in-depth demo of Edge Inspect, and show you how you can use it with other great testing tools to make your mobile web workflows more fun and efficient.

L8188 Working with Edge Inspect

In this hands-on Lab session, Edge Inspect engineer Duane O’Brien will guide you through the setup process for Edge Inspect, and walk you through some workflows that you’ll be able to put to use in your own projects immediately.

S8405 Tamagotchi Galore: Wrangling 7,000-Plus Devices

Andre JAY Meissner takes on a daunting topic – how do you do manage to choose which devices to test on, and gives you lots of tips for being smart, thorough, and efficient. This talk is terrific, and gets better each time Jay delivers it.

BL8573 Working Faster and Smarter with Edge Inspect

In this session, you’ll break out your laptop, your device (iOS, Android, Kindle Fire), and the browsers for those devices and get a hands-on introduction to the Edge Inspect features you need to know guided by Ray Camden, Adobe evangelist.

The rest of the session line up is going to be pretty great too, with lots relevant content and terrific speakers. Plus, MAX is a blast – we hope to see you there!

Bruce Bowman
Sr. Product Manager, Edge Tools & Services
twitter: @brucebowman@edgeinspect

 

Posted in Announcements, Meet the Team | Tagged , | Comments Off

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