Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
SEO Metadata
titlechrome DevTools - For Android Chrome

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

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 - F12Click on Menu → More Tools → Remote Devices
  • Go to chrome://inspect#devices
  • Make sure that the Discover USB device is enabled
  • Open devices → Choose device

  • Enter the site's URL

Image Removed




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.