Use the Adobe Edge Inspect CC testing tool

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

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

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

Figure C

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

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

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

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

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

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

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

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

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

Figure L

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.