Page tree
Skip to end of metadata
Go to start of metadata

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
Setting Up
  • Open Chrome Developer Console - F12
  • Click on Menu → More Tools → Remote Devices
  • Open devices → Choose device

  • Enter the site's URL



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.


  • No labels