Web Development

Test your website on mobile devices with Adobe Edge Inspect CC

Ryan Boudreaux explains how to install the Adobe Edge Inspect CC tool.

AdobeEdgeInspect_logo_090413.gif
If you haven't tested your website in mobile devices and across multiple browsers yet, Adobe Edge Inspect CC might be the tool you need to experience the site the way others do on all types of devices. With Edge Inspect CC, you can synchronize multiple devices to your desktop and then, as you navigate and browse to specific web pages, you can test them on the connected devices. All browsing conducted from the desktop is duplicated in each synchronized and connected device.

This two-part series starts with installing the desktop client and the Chrome Extension on a Windows 7 PC and then the iOS client on an iPhone. The second part will review using the Edge Inspect Chrome Extension on the desktop as well as on the iOS client version for iPhone.

You should review the system requirements before attempting any of these downloads and following the instructions -- at a minimum Windows 7 OS is required and for Mac OS X v10.7. You will also need an Adobe ID and password to access the Adobe Creative Cloud and the desktop client. If you don't have an Adobe account, you can sign up for a free one before accessing the Creative Cloud.

Installing Edge Inspect CC

You can try the Edge Inspect CC tool for free with a 30-day promotion, which includes the desktop download and a download for the Google Chrome Extension for desktops. It is available in three mobile client versions: iOS, Android, and Kindle Fire.

Install the desktop client, install the extension, and then install the mobile client on your various devices. Once the clients are installed, you can pair multiple iOS, Android, and Kindle Fire devices to your computer and snag screenshots from any of the connected devices.

In this case, I will be installing the desktop client, the desktop Chrome Extension, and the iOS client for the iPhone. Once the extension and client software is installed, you can wirelessly pair multiple devices to your computer, and then compare and view real-time results from edits to your HTML, CSS, and JavaScript.

Installing the desktop client

1. Click the Download button at the top right of the Edge Inspect CC page (Figure A). The executable file will be downloaded to your default download directory.  

Figure A

AdobeEdgeInspect_FigA_090413.gif

2. After the download is complete, click the CreativeCloudSet-Up.exe file. Click the Run button from the Open File – Security Warning dialog box (Figure B).

Figure B

AdobeEdgeInspect_FigB_090413.gif

3. The Adobe Installer will start the download of the Creative Cloud Desktop (Figure C). If you are asked to allow the program to make changes to your computer, click Yes (Figure D).  

Figure C

AdobeEdgeInspect_FigC_090413.gif

Figure D

AdobeEdgeInspect_FigD_090413.gif

4. The Creative Cloud window will open once the installation is complete. Enter your Adobe ID (email address) and Password, and then click the Sign In button (Figure E).

Figure E

AdobeEdgeInspect_FigE_090413.gif

5. Enter your date of birth, and then click the Update button (Figure F).

Figure F

AdobeEdgeInspect_FigF_090413.gif

6. Read the Terms Of Use, check the box that you have read and agree to the terms, and then click the Accept button.

7. Read the Adobe Software User Agreement in your specific language, and then click the Accept button (Figure G).

Figure G

AdobeEdgeInspect_FigG_090413.gif

8. The Creative Cloud software starts up and displays a list of applications available, as well as the ones you installed, including the Edge Inspect CC (Figure H). 

Figure H

AdobeEdgeInspect_FigH_090413.gif

9. Once the app is installed, the tray will pop up with the completion notice (Figure I), and you will see the Up To Date check in the Creative Cloud app list. You will also receive a Welcome email from Adobe thanking you for joining the Creative Cloud.

Figure I

AdobeEdgeInspect_FigI_090413.gif

10. Click the Home tab in Creative Cloud, and you will see the Edge Inspect CC in your Activity Stream (Figure J).

Figure J

AdobeEdgeInspect_FigJ_090413.gif

11. Go to your All Programs menu, and then click Adobe Edge Inspect CC -- this will take you to the Adobe Edge Inspect Installation Guide. When you are asked to connect the Edge Inspect Chrome Extension to Edge Inspect CC, click the Yes button (Figure K).

Figure K

AdobeEdgeInspect_FigK_090413.gif

12. You may need to set up Bonjour Installer for Windows OS; this information is listed in the Adobe Edge Inspect Installation Guide. For Win64, the path is \Program Files (x64)\Adobe\Adobe Edge Inspect\BonjourPSSetup.exe, and then follow the default prompts to install the Bonjour Print Services, and click the Finish button when completed.

Installing the Chrome Extension

Installing the Google Chrome Extension is quite easy.

1. From the link listed above and in Chrome browse to the Download link, and then click the + Free button (Figure L).

Figure L

AdobeEdgeInspect_FigL_090413.gif

2. In the Confirm New Extension dialog box that appears, click the Add button (Figure M).

Figure M

AdobeEdgeInspect_FigM_090413.gif

3. You are taken to the Getting Started Guide (Figure N).

Figure N

AdobeEdgeInspect_FigN_090413.gif

Installing the iOS device client

1. On your iPhone, tap your App Store icon to open it (Figure O).

Figure O

AdobeEdgeInspect_FigO_090413.gif

2. Use the search feature and enter Adobe Edge Inspect CC (Figure P).

Figure P

AdobeEdgeInspect_FigP_090413.gif

3. Click the Free button, and then click the Install App button (Figure Q).

Figure Q

AdobeEdgeInspect_FigQ_090413.gif

4. Enter your Apple ID password to complete the app installation. Once the installation is complete, click the Open button on the app. This will take you to the Connections feature, which will automatically find your nearest Wi-Fi hotspot, and the Getting Started page will appear (Figure R).

Figure R

AdobeEdgeInspect_FigR_090413.gif

Your iPhone has found the local Wi-Fi connection, and you're ready to make the connection and synchronize it to your desktop.

Part two

In the next installment, I will review using the Edge Inspect CC desktop client to test websites on an iPhone using the Edge Inspect CC.


About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
frylock
frylock

Not more than two hours before seeing this article I was peering at Edge Inspect in my CC Desktop panel and wondering "what the heck is that anyway?" Very timely!

Dextagg
Dextagg

Quite comprehensive and useful info for people to use!!

thanks for sharing

Editor's Picks