Web Development compare

Use the Adobe Edge Inspect CC testing tool

Ryan Boudreaux reviews using the Adobe Edge Inspect CC tools to inspect your websites on mobile devices that are synchronized with the desktop.

EdgeInspectLogo090513.gif
Adobe Edge Inspect CC allows you to synchronize multiple devices to your desktop, and then as you view pages on your website, you can test them on the connected devices.

My previous article about Edge Inspect CC reviewed downloading and installing the desktop client and Chrome Extension on a Windows 7 PC and installing the iPhone client on an iPhone 4. This final installment of my two-part series reviews using the tools to inspect your websites on mobile devices that are synchronized with the desktop.

The instructions swap between the desktop extension and the iPhone app, which might be confusing. If you remember that the screen captures with a predominant grey background are from the Chrome extension on the desktop and the screen captures with a predominant black background are from the iPhone app, you should be able to follow along with the steps just fine.

Connecting and synchronizing the devices

1. From the Windows 7 PC, make sure your Edge Inspect CC desktop application is running by checking to see that the In tray icon is showing. If it isn't, you can start it up from the Windows 7 path of All Programs | Adobe Edge Inspect CC (Figure A).

Figure A

AdobeEdgeInspect_FigA_090513.gif

2. In Chrome, find the extension Adobe Edge Inspect CC and the icon from the top of the toolbar and click to open the Edge Inspect CC (Figure B).

Figure B

AdobeEdgeInspect_FigB_090513.gif

The extension will start searching for connections (Figure C).

Figure C

AdobeEdgeInspect_FigC_090513.gif

This is when we jump onto the iPhone for a few steps.

3. On your iPhone, find the Edge Inspect In app icon and tap it (Figure D).

Figure D

AdobeEdgeInspect_FigD_090513.gif

4. Activate the Edge Inspect CC app and, if the desktop computer is not found, you can manually add the device by touching the + at the top right and entering the computer name or computer IP address. Your Wi-Fi connection will show up first (Figure E).

Figure E

AdobeEdgeInspect_FigE_090513.gif

In this case, I added the known IP address of 192.168.1.3 for the desktop PC and pressed the Join button (Figure F).

Figure F

AdobeEdgeInspect_FigF_090513.gif

Note: Your desktop and your wireless mobile devices need to be on the same subnet IP network in order to connect and synchronize.

5. The Edge Inspect CC app will now connect with the desktop. In my case, the desktop device appears as the desktop name, but yours could appear as the IP address of the PC as well -- it depends on how your PC is recognized on your network (Figure G).

Figure G

AdobeEdgeInspect_FigG_090513.gif

For security purposes and for synchronization to occur, a passcode is sent from the desktop that will appear on the iPhone app display (Figure H).

Figure H

AdobeEdgeInspect_FigH_090513.gif

6. Going back to the desktop and from the Chrome extension on the desktop PC, you will enter the passcode as it appears on the iPhone (Figure I).

Figure I

AdobeEdgeInspect_FigI_090513.gif

Once the passcode is entered and the connection is made, the iPhone will show up in the list from the Edge Inspect CC on the desktop (Figure J).

Figure J

AdobeEdgeInspect_FigJ_090513.gif

7. On your desktop and in Chrome, browse out to your website that you want to test. The iPhone will display the same website on its Edge Inspect CC client. In this case I sent it to the TechRepublic website in the Chrome browser and then viewed it on the iPhone, and this is how it appears in the iPhone (Figure K).

Figure K

AdobeEdgeInspect_FigK_090513.gif

Options while viewing the website from the iPhone include Refresh, Open in Browser, Copy URL, and Screenshot (Figure L).

Figure L

AdobeEdgeInspect_FigL_090513.gif

Connect all of your mobile devices in the same manner. Now you can go to your development environment and start making adjustments to your HTML, CSS, and JavaScript. And then from your desktop PC, refresh your Chrome browser opened to the edited web page, and with the Edge Inspect CC Extension, the results get propagated to the connected iPhone or other devices you have attached to the Edge Inspect CC Chrome Extension.  

The real benefit with using Edge Inspect CC is that you can connect many mobile devices to your desktop and make edits on the fly to testing pages, and then refresh Chrome on those edited pages and each of your connected and synchronized devices will update their screens on the fly to the new web page. This is a real boon to troubleshooting and testing your website across a variety of mobile devices.


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...

1 comments