How to debug pages in UC browser

Debug real-time content on your Android device remotely from a Windows, Mac, or Linux computer. This tutorial whill show you how to:

  • Set up your Android device for remote debugging and discover devices from your development computer.
  • Check and debug live content on your Android device from your development computer.
  • Capture the contents of your Android device to your DevTools instance on your development computer.

requirements

  • Chrome 40 or later is installed on the development computer (the latest version is recommended).
  • The [USB Driver] has been installed on the development computer (https://developer.android.com/tools/extras/oem-usb.html?hl=en) (if you are using Windows). Make sure Device Manager reports the correct USB driver
  • Have a USB cable that connects your Android device to your development computer.
  • Android 4.0 or later.
  • UC Browser (Android Developer Edition) is installed on your Android device. Download: https://plus.ucweb.com/download/.

Step 1: Discover your Android device

  1. On your Android device, select Settings > Developer Options > Enable USB Debugging . On devices running Android 4.2 and later, Developer options is hidden by default. See Enabling developer options on your device for how to enable it.
  2. Open Chrome on your development computer. Remote Debugging does not work in Incognito Mode or Guest Mode.
  3. Enter chrome://inspect/ in the address bar to open DevTools Devices.
  4. Make sure Discover USB devices is enabled. 01.jpg | 415x219
  5. Connect your Android device directly to your development computer using a USB cable. Do not use any intervening USB hubs. If this is the first time you connect your Android device to this development computer, your device will show Offline. 02.jpg | 415x194
  6. If your device is showing Offline , Allow USB Debugging permission prompts are accepted on your Android device. Offline is replaced by the model name of your Android device. At this point, you can remotely debug your UC browser on your Android device from your development computer. 03.jpg | 415x171

Note: If you encounter any problems with the discovery process, you can restart the process by selecting Settings > Developer Options > Revoke USB Debugging Authorizations on your Android device.

Step 2: Debug the content on your Android device from your development computer.

  1. If you have not opened your UC browser on your Android device, open it now.
  2. Back to DevTools Devices, click on the label that matches the device's model name. At the top of this page you will see the model name of your Android device, followed by its serial number. Below the model name, you can see the version of UC Browser running on the device. Each open UC browser's label will have its own area. You can interact with this tab from this area. 04.jpg | 415x171
  3. Click Inspect below the URL you just opened. This will open a new instance of DevTools.

Inspect Elements

Go to the Elements panel of your DevTools instance and hover over an element to highlight it in the viewport of the Android device.

You can also tap an element on the Android device screen to select it in the Elements panel. Click Select Element on your DevTools instance, then tap on this element on your Android device's screen. Note that Select Element will be disabled after the first touch, so you will need to re-enable it each time you want to use it.