It is possible to 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
Preparing
- Open device in manual mode
- Initiate Remote Debugging session
- Open Chrome on the device
- Open Chrome on Desktop
Setting Up
Connecting to Device and Opening Site
- Open devices → Choose device
- Enter the site's URL
- Click on "Inspect"
Inspecting and Debugging
Once you click "Inspect" a window will popup showing 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.
