android

debugging web page css on an android phone


We can use the inspect element/mobile device emulator in Chrome to add/edit CSS on live sites and see how the site behaves. Is it possible to do the same directly on an android phone or tablet, somehow?

I have been asked to improve a site (but I don't have server access) but have noticed that its navigation behaves differently in the Chrome emulator and on my Android devices. (It might be a javascript that interferes or does something on the phone that is not picked up in the emulator)


Solution

  • If you're running a modern version of Chrome, you can use remote debugging for Android devices. This requires:

    • Chrome 32 or later installed on your development machine.
    • A USB cable to connect your Android device.
    • For browser debugging: Android 4.0+ and Chrome for Android.
    • For app debugging: Android 4.4+ and a WebView configured for debugging.

    The full details are documented at the linked page from Google's documentation, but the process essentially consists of connecting the device to your computer, enabling USB debugging, and navigating to chrome://inspect in Chrome on the development computer. From there, you'll be able to use the inspector on the desktop Chrome instance to debug into your pages within the mobile Chrome instance.