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
- Open Developer Options on your mobile.
- Select Enable USB Debugging.
- Open Chrome on your computer.
- Open DevTools (F12).
- In DevTools, click the 3 dots at the top right, then select More tools > Remote devices.
- In DevTools, in Settings -> make sure that the Discover USB devices checkbox is enabled.
- Connect an Android device with USB cable.
- 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
- 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.
- Select the device in the Remote Devices tab.
- Click Inspect next to the URL that you just opened. A new DevTools instance opens.
For iOS:
- On iPhone tap Settings > Safari > Advanced and toggle on Web Inspector. Enable JavaScript if it isn't already enabled.
- 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”.
- Connect the device to mac with a USB.
- Open website on iPhone, go to the “Develop” menu on Mac. You will see your iPhone connected with your Mac.
Please sign in to leave a comment.
Comments
0 comments