Debugging

Debug Webpages on Android with Chrome DevTools

  1. Step 1: Discover your Android device
  2. Step 2: Debug content on your Android device from your development machine
  3. JavaScript Console

Step 1: Discover your Android device

  1. Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
  2. Select Enable USB Debugging.
  3. On your development machine, open Chrome.
  4. Go to chrome://inspect#devices.
  5. Make sure that the Discover USB devices checkbox is enabled.
  6. Connect your Android device directly to your development machine using a USB cable. The first time you do this, you usually see that DevTools has detected an offline device. If you see the model name of your Android device, then DevTools has successfully established the connection to your device. Continue to Step 2.
  7. If your device is showing up as Offline, accept the Allow USB Debugging permission prompt on your Android device.

Step 2: Debug content on your Android device from your development machine

  1. Open Chrome on your Android device.
  2. In the chrome://inspect/#devices, you see your Android device’s model name, followed by its serial number. Below that, you can see the version of Chrome that’s running on the device, with the version number in parentheses. Each open Chrome tab gets its own section. You can interact with that tab from this section. If there are any apps using WebView, you see a section for each of those apps, too.
  3. In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.
  4. Click Inspect next to the URL that you just opened. A new DevTools instance opens. The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you’re used to.

Source: https://developer.chrome.com/docs/devtools/remote-debugging/

JavaScript Console

  1. Open the page that you want to debug
  2. While on that page, in the address bar of a stock Android browser, type:
    1
    about:debug
  3. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.