Preview and inspect web designs on devices with Adobe Edge Inspect

Bruce Bowman

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.

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

Connecting your computer and mobile devices with Edge Inspect

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

Launch Edge Inspect on your computer.

Create or open a web page using Adobe Edge Code or the code editor of your choice.

Upload the site files to a local or host server and then visit the page in the Google Chrome browser.

Click the Edge Inspect icon at the top right corner of the Chrome browser to connect your computer with other local devices.

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.

Figure 2. The Edge Inspect app on the device displays a passcode.

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.

Figure 3. Type the passcode displayed on your device in the Passcode field.

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.

Previewing live web content on connected devices

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

Figure 5. As you browse, connected devices stay in sync. In this image, Edge Inspect is remotely controlling more than 20 devices.

Working with remote inspection

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:

Use your computer to view a page in Chrome.

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

Figure 6. Click the Remote Inspection (< >) button next to the device you want to inspect.

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.

Working with screenshots

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

Figure 8. Click the camera icon to request new screenshots.

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

Figure 9. Use the Action menu to capture a screenshot on the device.

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

Figure 11. Each screenshot is saved in .png format and has a corresponding text file.

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

Figure 12. The screenshot's metadata is listed in the text file.

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.

Refreshing devices remotely

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

Figure 13. Click Refresh All Devices to clear the cache of all paired devices.

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.

Full-screen display on devices

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

Figure 14. Click the Full Screen icon to toggle full-screen display on all connected devices.