How to Debug Mobile Experiences in the Desktop Chrome's Developer Tools?

When debugging mobile we can use DevTools on the computer’s screen mirroring the device’s browser.

For Android:

• Go to Settings › Additional settings › Developer options
• To enable Developer options:
• Settings › System > About phone › Scroll to the bottom and tap Build number 7 times › Return to the previous screen to find Developer options near the bottom.

Step #1: Discover your Android device with the DevTools on the computer

1. Open Developer Options on your mobile.
2. Select Enable USB Debugging.
3. Open Chrome on your computer.
4. Open DevTools (F12).
5. In DevTools, click the 3 dots at the top right, then select More tools > Remote devices.
6. In DevTools, in Settings -> make sure that the Discover USB devices checkbox is enabled.
7. Connect an Android device with USB cable.
8. Approve the device and you will see the green dot on the left ensuring the device was connected.

Step #2: Debug content on your Android device using DevTools

1. In the ‘New tab’ text box, enter a URL and then click Open (or open Chrome on your Android). The page opens in a new tab on your Android device.
2. Select the device in the Remote Devices tab.
3. Click Inspect next to the URL that you just opened. A new DevTools instance opens.

For iOS:

1. On iPhone tap Settings > Safari > Advanced and toggle on Web Inspector. Enable JavaScript if it isn't already enabled.
2. On Mac, open Safari (Safari’s Web Inspector is only compatible with Mac) and go to Preferences > Advanced, then check “Show Develop menu in menu bar”.
3. Connect the device to mac with a USB.
4. Open website on iPhone, go to the “Develop” menu on Mac. You will see your iPhone connected with your Mac.