1. First set in app/src/main/AndroidManifest.xml to allow app debugging
<!--添加以下两个属性-->
<application
android:debuggable="true"
tools:ignore="HardcodedDebugMode"
>2. Call the webView.setJavaScriptEnabled(true) method when initializing WebView
WebView webView = findViewById(R.id.webView);
webView.setWebContentsDebuggingEnabled(true); // 主要是执行这一行，参数传 true
3. Install the mobile Chrome browser on the mobile phone/simulator. If it is debugged with PC Chrome, the mobile Chrome version cannot be higher than the PC Chrome version, otherwise debugging may not be successful. In addition, you can also use mobile chrome + PC side edge debugging. Similarly, it is necessary to update the PC side edge to the latest version before debugging. The edge version number cannot be lower than the mobile side chrome version.
4. Install the debuggable version of the app that has been set up in steps 1 and 2 on the mobile phone/simulator. Note that real device debugging needs to be connected to the computer with a data cable, and the real device needs to turn on the developer mode and allow debugging. If it is an emulator, the debugging function is already turned on by default, and no additional settings are required. Then open the WebView page that needs to be debugged in the simulator. Then open the chrome://inspect page in the computer's chrome browser; if you use the computer's edge browser to debug, please open the edge://inspect page; you can also see on the Internet that you use the computer's qq browser to debug, so please open qqbrowser: //inspect; there are other browsers that are no longer listed, please feel free to use them.
As expected, you will see the following interface. The red box shows the WebView page you opened on your phone or simulator.
Click the inspect button below the link to open a snapshot of the page, which actually synchronizes the mobile screen in real time; it also supports operating the mobile interface on the PC interface, which is actually remote control (edge supports it, Chrome seems not to support it, and can only be operated on the mobile phone) operation).
When the interface is successfully displayed, Chrome's developer tools will automatically open on the right side. At this time, we will enter the familiar front-end development and debugging method. At this time, you can use element, network, console, source, application and other panels in the developer tools to debug the page, which is extremely convenient.
When debugging through chrome on the PC, the page may remain loading (white screen) after clicking the inspect button for the first time, or display 404 not found. At this time, we switch to edge browser to try, or we can set up the ladder and continue to try with chrome. . The reason for this problem is that in the debugging interface, you need to first load the relevant dependencies that support the debugging function through the chrome official link. However, this link should be blocked, so you need to hang a ladder. It will not be needed later. This dependency will be blocked by the browser. Cache it. However, this link in the edge browser seems to use Juhard's own mirror and is not blocked, so there is a high probability that edge can access it directly without hindrance.
If you have any questions, please feel free to communicate in the comment area.