preface

Mobile terminal page debugging has been a headache for many friends, iOS due to its closed characteristics and overall high performance, the overall adaptation is relatively easy to do, debugging also becomes very convenient due to safari through. The Android system, especially the Android system in the domestic environment, has become the main platform for mobile terminal page problems due to the large version span and the use of self-developed kernel by various manufacturers. Engineers use a variety of methods to debug it: alert method, page introduction or injection of VConsole/eruda to start mobile console, Fiddler/Charles/Whistle packet capture, Weinre…… , various solutions emerge in an endless stream, but with the domestic manufacturers actively update the kernel and the old version of Android models gradually eliminated, under the current node, we only need to do a little work, we can use the most familiar Chrome developer tools to debug the mobile terminal page.
This article describes how to use Chrome Developer tools to debug various WebView environments on Android terminals, including the following environments:
  • Chrome and other browsers based on the native Chromium kernel
  • Wechat, QQ, QQ browser X5 kernel Webview
  • UC browser and other U4 or above kernel Webview
  • App embedded Webview
  • System browser
If you already know how to turn on Inspect in each of the above environments, this article doesn’t make much sense to you, so you can turn it off. But if you don’t know how to enable Inspect for Chrome, you can continue to read, should help you later debugging work, Let’s do it!

Enable Inspect for Chrome

To open the inspect debug screen, type Chrome ://inspect/# Devices in the Chrome address bar and press Enter

Discover USB devicesOptions to see a list of devices.

Then open the developer option in the mobile phone and turn on the USB debugging switch (the specific method is self-baidu, different mobile phones have certain differences), use the data cable to connect the mobile phone to the computer, we can see our device in the device list.

At this point, if you have Chrome on your phone, open a web site (nuggets, for example) and the page will appear under your device in the device list.



At this point, let’s click the inspect option


See this familiar interface? Everything you do on the left screen is always in sync with everything you do on your phone. If you think the left screen is too much, you can turn off Toggle Screencast and leave the console alone.


Click the arrow in the upper left corner, and then tap the area of the phone screen to select the specified element. The rest of the operation is exactly the same as on the PC.

If you haven’t used this debugging method before, you should find it much easier and faster than before
The problem comes, Chrome mobile browser in the domestic market share is very small, our page mainly appears in wechat, QQ, UC browser or App embedded and so on, for these environments, how to open inspect debugging? Let’s talk about each of them.

Wechat, QQ, QQ browser X5 kernel Webview

Under X5 kernel environment, we visit debugx5.qq.com/

In this page, we can configure the X5 kernel (it is not recommended to change the configuration if it is not necessary). We select the information Tab and check “Open the TBS kernel Inspector debugging function” and “Open the TBS kernel X5jscore Inspector debugging function”. After completion, restart the page to take effect

Then the inspect page will automatically refresh the list, then we can debug the X5 kernel Webview such as wechat and QQ

UC browser and other U4 or above kernel Webview

For U4 and above kernels, visit plus.ucweb.com/download/ to download the corresponding development versions of Chinese and international UC browsers
Then we open the page to debug in UC development and, as above, we can see the page opened in UC Browser in the list and debug it

App embedded Webview

Many teams will adopt Hybrid mode for business development. For the pages embedded in App, we need Android colleagues to help open Webview debugging. The specific methods are as follows: 

webView.setWebContentsDebuggingEnabled(true);Copy the code

Each WebView component instance needs to be set up separately, enabling inspect debugging

System Built-in browser

For MIUI’s built-in browser (MIUI for example), we need to swipe into the development system, and then the system’s built-in browser can be debugged via Inspect

The above is to use Chrome developer tools to debug the Android side of the various environment Web page method, hope to help you




If this article is helpful to you, please pay attention to my wechat official account (Jiaoer), and update my notes, useful tools and interesting ideas from time to time. Thank you!