Remotely debug native WebView in Android using the Chrome Developer tool

I have written an article about the debugging techniques of breakpoints in Android Studio, but all of them are for debugging Native code, but it is impossible for WebView in Hybrid development mode. Fortunately, the Chrome browser in the PC provides developer tools to help us remotely debug WebView-loaded pages in Android.

Android 4.4 (KitKat), use the Chrome developer tools to help us remotely debug WebView Web content in a native Android app. Let's see how it's done.

The first step is to set the WebView debug mode. The WebView class contains a public static method, which acts as a Debug switch:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    WebView.setWebContentsDebuggingEnabled(true);}

Note : This method is compatible with Android 4.4 and later and is only set once to apply to all WebView in the project and is not affected by the properties in the Manifest file debuggable .

Second, make sure the USB connection is on the premise, open the Chrome browser in the PC, enter the URL, open the page:

chrome://inspect

The Devices menu page of the DevTools page automatically displays the currently connected remote device name and serial number, as well as the web address of the WebView opened by the current native App.

Click the inspect option at the bottom of the page to access the Developer Tools page:

, Web page display content and source code, console, etc. can be seen, for Android developers to freely debug.

In fact, the Chrome developer tools are also a debugging tool for H5 developers to develop mobile-side web pages.

Open the Developer tools page of the Chrome browser on your PC: settings -- more Tools , Developer Tools , or right-click on any page of your Chrome browser to select check . In the developer tools, open Remote devices as follows:

Also, ensure that the PC is connected to the phone device via USB, check the Discover USB devices option on the left Settings menu of the Remote devices page:

Open your phone's Chrome app and select the phone device in the Remote devices to see the current version of the Chrome app and a URL entry box:

Here, we can enter any URL address, click Open, you can open the mobile phone Chrome on the page, while the Remote devices appear in the corresponding address bar, click to enter the previous introduction WebView When you see a similar debug page.

For more details on Chrome DevTools, please refer to the link: Chrome DevTools for Mobile:screencast and Emulation.

About me: also maple, blog address: http://yifeng.studio/, Sina Weibo: it also maple

Scan QR Code, Welcome to my personal public number: Android note-taker

Not only share my original technical articles, but also the programmer's career reverie

Remotely debug native WebView in Android using the Chrome Developer tool