Connect your devices to the Dreamweaver desktop app to preview, inspect, test, and debug your web pages on different devices.
Preview and inspect web pages

Dreamweaver now lets you test your production-ready web pages simultaneously on multiple devices. You can see how your web page reflows in various form factors and also test interactive features on your pages. All these without having to install any mobile app or having to physically connect the devices to your desktop! Simply scan the auto generated QR code with your devices and preview your web pages on the devices.

Live inspect, when triggered on desktop, reflects on all connected devices and helps you inspect various elements and tweak the design as required.

Prerequisites

Ensure that you have a QR code scanner installed on your devices.
Ensure that your desktop and mobile devices are connected to the Internet and are on the same network.
Ensure that you have your Adobe ID credentials handy. You need the Adobe ID that you use for Dreamweaver on your desktop to log in to the devices during the preview.
If you are an enterprise customer, check if you have the required permissions to access the Device Preview service.
On the devices, ensure that JavaScript and cookies are enabled in the browser settings.

Supported devices

All Android and iOS devices

Preview web pages on devices

  1. On your desktop computer, launch Dreamweaver, and open the web page that you want to preview on devices.

  2. Click the Real-time Preview icon in the document toolbar.

    Real-time preview on device
    Real-time preview on device

    The Device Preview pop-up appears with a QR code and a short URL.

     

  3. Scan the QR code with the mobile device on which you want to preview the web document. To connect multiple devices, scan the QR code with each of those devices.

  4. On the devices, a login screen appears. Log in using your Adobe ID credentials. Ensure that you use the same Adobe ID that you use for Dreamweaver/Creative Cloud.

    Login screen on devices
    Login screen on devices

  5. After a successful login, the names of the connected devices appear in the Device Preview pop-up. And, you will see a preview of your web page on the connected devices.

    Device Preview pop-up showing connected devices
    Device Preview pop-up showing connected devices

Note:

To map the device names in the pop-up with the actual device, hover your mouse on the device names. A feedback screen appears on the corresponding device.

Inspect web pages on devices

To inspect the web page on all the connected devices, click the Inspect icon in the Dreamweaver toolbar.

The Inspect option on the toolbar
The Inspect option on the toolbar

To inspect the web page on a specific device, click the inspect icon that corresponds to the device name in the Device Preview pop-up. The viewport in Dreamweaver is set to match the viewport on the corresponding device and inspect is triggered on that specific device and Dreamweaver.

Click the Inspect icon in Dreamweaver again to exit the Inspect mode.

All the edits that you do to your web page on the desktop are reflected immediately on the devices after they are committed.

Troubleshoot issues with Device Preview

If you run into issues while connecting your devices or previewing your web pages on devices, see the information in the article Device Preview - Troubleshooting.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy