Preview and inspect web designs on devices with Adobe Edge Inspect

Adobe Edge Inspect is a new tool you can use to inspect and preview the HTML5 content you create for mobile devices. It is not an emulator or simulator; it enables you to connect multiple devices to your computer wirelessly. As you visit web pages on your computer, the synced devices display the same content. Edge Inspect works with the Google Chrome browser and many iOS, Android, and Kindle Fire devices.

With Edge Inspect, you can target a device for remote inspection, use your computer to tweak the code, and see the changes update instantly on the device. Revised content is easy to view because it takes just one click to clear the cache of all connected devices. You can also take screenshots of the device viewports and use them to communicate with your colleagues. The screenshots are saved as PNG files and transferred to your computer along with helpful device-specific metadata.

Edge Inspect works with any code editor or IDE, so it easily integrates into your regular web development workflow. It keeps your devices from going to sleep and eliminates the need to pick up and use each device, so you can keep working on your computer without interruption.

Edge Inspect is a member of the Adobe Edge Tools and Services family of products, which also includes Edge Animate (interactive HTML5 animations), Edge Reflow (responsive web layouts), Edge Code (HTML5 code authoring), Edge Web Fonts (free web fonts), Typekit (commercial web fonts), and PhoneGap Build (native mobile app packaging). To learn more, visit the Adobe Edge Tools and Services page.

Note: There are two versions of Edge Inspect: a free, limited version and a paid, premium version. The premium version enables you to take screenshots of all connected devices and does not limit the number of concurrently connected devices. (The free version allows only one concurrent connection.)

To download and try Edge Inspect, visit the Adobe Edge Inspect site and create an Adobe ID. You'll also need the Google Chrome extension to run Edge Inspect in your Chrome browser. The extension is supported in both Mac and Windows environments.

Use your mobile device to download the Edge Inspect mobile device client:

• Edge Inspect client for iOS devices
• Edge Inspect client for Android devices
• Edge Inspect client for Amazon Kindle Fire

To use Edge Inspect, your devices and computer must be connected to the same wireless network. Edge Inspect works with localhost, intranet, and Internet servers. If you are testing local web content, you can use a local web server such as MAMP or XAMPP or the built-in web servers on Mac OS X and Windows. To learn more about the localhost workflow to preview mobile content that is not yet uploaded to the web, see the workflow series on the Adobe Edge Inspect team blog.

After installing Edge Inspect, the Google Chrome extension, and the mobile device client on your devices, follow these steps:

1. Launch Edge Inspect on your computer.
2. Create or open a web page using Adobe Edge Code or the code editor of your choice.
3. Upload the site files to a local or host server and then visit the page in the Google Chrome browser.

Note: To set Google Chrome as your system's primary browser, launch Google Chrome and choose Chrome > Preferences. In the Settings section, click the Make Google Chrome My Default Browser button (see Figure 1).

4. Click the Edge Inspect icon at the top right corner of the Chrome browser to connect your computer with other local devices.
5. Use your mobile device to open the Edge Inspect app.

Note: The mobile device must be running on the same network as your desktop or laptop computer. Enable Wi-Fi in the Settings to connect it to your wireless network.

The Edge Inspect panel displays the names of computers on your network that are running Edge Inspect. Select your computer's name to connect. Your device will display a passcode (see Figure 2). Look back at your computer monitor and you'll see that Edge Inspect is ready to connect to your device. The panel updates to display a Passcode field.

6. Enter the numbers displayed on your device in the Passcode field (see Figure 3). In this example, a device named Tommi's iPad is being connected to a laptop computer named Tommi's MacBook.

7. Press Enter (Windows) or Return (Mac OS X) to pair the device with your computer. The Edge Inspect panel updates again to confirm the connection (see Figure 4).

If you want to connect multiple devices, repeat steps 4–7. The panel displays the list of paired devices. There is no limit to the number of devices you can sync to your computer with the full version of Edge Inspect.

Once you've paired a device with your computer, it is authorized to reconnect — you will not be required to go through the pairing process with that device the next time.

Once you've connected one or more devices, Edge Inspect enables the devices to synchronously browse with your computer.

As you browse in Google Chrome, the connected devices are sent to the same URLs. There's no need to touch the screens or navigate to pages manually. The Edge Inspect Chrome extension transmits the URL data as a command to the iOS and Android apps. The devices browse to the same URL, so if you have any media queries or conditional code based on the user agent, those devices will get the content you intended. Edge Inspect is like a remote control that causes devices to update in real time (see Figure 5).

Remote inspection is a feature in Edge Inspect that enables you to inspect the HTML and CSS as it is rendered on a device. This is a helpful way to debug problems and tweak page layouts:

1. Use your computer to view a page in Chrome.
2. Open the Edge Inspect panel to see the list of connected devices. Click the Remote Inspection (< >) button for one of your devices (see Figure 6).

3. When you see that a connection has been established, click the Elements button to see the source code that is being rendered on the device. Click the <body> tag to expand it and then click the set of tags you want to adjust.

If you click the source code of a page element, it is highlighted in blue on the device. Edit the HTML or the properties of the CSS rules in the right column to see the elements update on the device. Changes to the page are re-rendered on the device on the fly (see Figure 7).

This is a great strategy for experimenting, testing fixes, or trying out new looks. Once you've made some changes, you can even take a screenshot to share with colleagues or clients.

Screenshots are a feature in Edge Inspect that allow you to capture the web content displayed on device screens and store it as a PNG file, along with related metadata.

Using the Edge Inspect panel on your computer, you can click the camera icon to take screenshots of all connected devices (see Figure 8).

Alternatively, you can use the Action menu on the device to take a screenshot of the content currently displayed on that screen (see Figure 9).

Note: Edge Inspect captures the screenshot as the content appears on the screen. Screenshots display the viewport — the visible area of a page. For example, if you scroll or zoom in, the screenshot taken on the devices reflects the same magnification.

Every time you take a screenshot, a PNG file and text file for each device are generated and stored on the computer. You can quickly access the screenshots you generate from within the Edge Inspect panel (see Figure 10).

By default, screenshots are saved in the Edge Inspect subfolder in the Documents (Mac OS X) or My Documents (Windows) directory (see Figure 11).

The set of files are named with the date, time, and device name to identify each screenshot.

You can open the text file in any text editor to see helpful information about the screenshot, including the screenshot's URL and page size as well as the device's OS name, version, model, screen resolution, and pixel density (see Figure 12).

Use screenshots to compare how the page layout displays. As needed, use your code editor to make adjustments to the design and then reload to test the page again.

After making changes, Edge Inspect simplifies the process of refreshing the cache on devices. Rather than picking up each device and manually clearing the cache, you can clear the cache for all connected devices by clicking a button in the Edge Inspect panel.

To clear the cache and see the newest version of a page, click Refresh All Devices (see Figure 13).

This makes it easy to refresh all screens to view the most recent versions of your assets.

If you are already holding a connected device, you can also use Refresh All Devices in the Action menu.

Sometimes you need to see what your content looks like when it is using the full screen. To hide the Edge Inspect user interface and allow your content to go full-screen, click the Full Screen toggle button in the Edge Inspect panel on your computer (see Figure 14).

To learn more about working with Edge Inspect, visit the Adobe Edge Inspect product page. And to get the latest news, workflow tips, and information about new features, check out the Adobe Edge Inspect team blog.

In the following video, Adobe evangelist Paul Trani provides an overview of Adobe Edge Inspect. See how easy it is to preview and inspect mobile web workflows.