Chrome DevTools - For Android Chrome

You can debug a web application (mobile site) using Chrome for desktop and a device that is connected via Remote Debugging.

When a device is connected via Remote Debugging, your machine treats it as if it is connected locally via USB. This allows Chrome to see the device as locally connected which is why it then enables you to debug your mobile site.

Debugging a Mobile Site

1. Open a device in manual mode.

2. Initiate a Remote Debugging session.

3. Open Chrome on the device.

4. Open Chrome on Desktop.

5. Navigate to: [chrome://inspect#devices
   

   ]

6. Make sure that the Discover USB device is enabled.

7. Under Remote Target, locate the mobile device.

8. Enter the site's URL.

9. Click Inspect.

Inspecting and Debugging

Once you click Inspect, DevTools displays the site in mobile formatting, alongside the HTML DOM tree and CSS configuration.

You can now start changing the DOM and CSS to see how the site renders.