Easily test the same page on a variety of devices using Adobe Edge inspect

Developers who have experienced mobile Web development know that testing the same page on a variety of devices is a tedious task. Now, we can use Adobe Edge inspect to simplify this effort. If you use Edge Inspect, you can browse the same page in a browser on a variety of devices. In addition, the software also provides tools for debugging, which makes it easy to debug any problems that exist on the page. The more devices your Web site needs to support, the more time and effort you can save by using edge inspect software.

This article describes how Adobe Edge inspect is installed and used. While Adobe Edge inspect is a free-to-use software in Creative Cloud, the features available in the Free edition are also limited, and devices that can be connected at the same time are limited to one. If you want to use the commercial version of Adobe Edge Inspect, you need to register as a member of the Creative Cloud and then purchase the Adobe Edge Inspect product. In the commercial version, there is no limit on the number of simultaneous devices connected.

Installation

The installation of Adobe Edge inspect is simple and is divided into the following three steps:

1. Install Adobe Edge Inspect in your PC.
2. Install the Adobe Edge Inspect cc extension in your Chrome browser.
3. Install the Adobe Edge Inspect client on a variety of devices, including iOS clients, Android clients, and Kindle clients.

After the installation of Adobe Edge Inspect (hereinafter referred to as Edge Inspect), you can use the software in the steps shown below.

1. Start the edge inspect software in the PC.
2. Start the edge inspect client in the device (only 1 devices are connected at the same time in the Free edition).
3. When the device is in the same network as the PC, the PC name is displayed in the "Connections" list in the edge inspect client for each device.
4. Click on the PC name to display the passcode.
5. Open the Chrome browser in the PC and the icon on the right side of the address bar that represents the edge inspect extension feature. Click the icon to display the device name on the same network in the Panel. Click on the device name, enter the device's passcode, and tick the checkbox on the right, the device and the PC is connected to the PC to browse the test page, the page will be displayed synchronously in the device.

Edge inspect extension menu in Chrome browser (connection successful)

Once the device is connected to the PC, it is not necessary to enter the passcode in the PC machine.

Please note: If you use a VPN network, the device may not be recognized in your PC.

Browse Features

Navigating the page in Edge inspect is a very easy thing to do. When a page is opened in the PC's Chrome browser, all devices connected to the PC display the same page. In addition, only the content in the Chrome browser's current tab is displayed in Edge inspect in the device. If you switch tabs in the Chrome browser, the content displayed in the edge inspect in the device will also be toggled in sync.

In addition, you can perform full-screen browsing in edge inspect. In Chrome, the full screen browsing feature of Edge inspect is turned off by default. If you want to perform full-screen browsing, you need to click on the "Show devices" icon in the Edge inspect panel in Chrome, click the icon and the top part of all connected devices is hidden, click the icon again, and the top section will be displayed.

Not only can you browse a Web site in edge inspect, but you can also browse a Web site running on a local localhost server.

Of course, a file opened through the "file:///" protocol cannot be browsed in edge inspect because the file does not exist on the device. In addition, when you visit a website that requires a password, you need to log in on each device.

Also, when you need to refresh the page in your device, you can click the icon in the upper-right corner. In addition, when you click the Refresh button in the chrome Edge inspect panel, you can refresh the page at the same time on all connected devices. When the refresh function is performed, the cache is also purged and a new access request is issued to the server side.

Debugging features

While the features we've introduced are very useful, we'll focus on debugging features. Click the < > button next to the connection device name in the Chrome's Edge inspect panel to open the Debug window and start the Remote debugging feature. This feature uses the WEINRE (Web Inspector remote) feature internally. Developers who are accustomed to using Chrome developer tools will be very familiar with this feature.

Debug windows for internal use of weinre

In the Debug window, you can perform the display and editing functions of the DOM. After you edit the DOM, the edited content will be displayed in real time on the device. In addition, you can observe the log output from the console window in the Debug window, which is a useful feature when debugging Html/css/javascript.

The debugging window also has some limitations. For example, the Console tab panel displays only the information that is output from event handlers when events are triggered when a button is clicked in the device. In addition, when editing the Html/css/javascript code, you cannot append new lines, that is, the "edit as Text" and "Edit as HTML" options in the Chrome Developer tool.

Screen-shot features

Provides screen-shot functionality in edge inspect. This snapshot feature not only targets a connected device, but also performs snapshot functions on all connected devices at the same time. When you need to take snapshots of all connected devices, you can click the camera icon in the Edge inspect panel of the Chrome browser. The snapshots in each device after the click are transferred to the PC. Click the folder icon next to the camera to open the folder where the snapshots are placed. You can modify the folder location by right-clicking the Chrome browser's edge inspect extension and then tapping the Options menu item.

If the snapshot function is only available on a device, click on the icon in the top right corner of the device's edge inspect software interface and click "Screenshot".

Currently the snapshot content is only limited to the current viewport. Therefore, after scrolling or zooming the screen before taking a photo, the snapshot content is only limited to the content in the current viewport.

In addition, when you perform the snapshot function, you save a text file that records the page URL, page size, device operating system, device type, and pixel density when taking the photo. This feature is useful for checking the cause of a problem after a problem has been tested.

Easily test the same page on a variety of devices using Adobe Edge inspect