Use of front-end debugging tools (step on the pit road)

I. Introduction of mobile browser environment

  1. The androidMobile webView under Android system is currently divided into two types of kernel: native browser kernel, Tencent X5 browser kernel. Two kinds of kernel, here involves a configuration, need android native webView support debugging. As follows:WebView.setWebContentsDebuggingEnabled(true);This will allow us to continue with the rest of this article. If you do not have the ability to allow debugging please refer to this article:Blog.csdn.net/zhulin2609/…
  2. IOS About webView in IOS system, all are Safari kernel, so we can do the corresponding operation next.

2. Debug Tool Introduction

  1. inspect inspectIs a remote debug directive built into Chrome that supports debugging of allMobile terminal based on chrome kernel webViewIt is convenient for us to use it to link mobile phones for debugging, view command lines and network interfaces, and even interrupt points when we cannot troubleshoot problems through packet capture. It is convenient for us to debug the code and troubleshoot problems. (Note: Only used to debug Android)
  2. Safari Development Tools Safari Development ToolsInspect is a developer tool module built into the SAFARI browser on PC, which functions the same as Inspect, except that inspect provides a webView window. (Note: Only used to debug ios)

3. Use the DEBUG tool

  1. Chrome://inspect

    1. Adb installation passedbrewLet’s set it upadbCommand:brew install adb
    2. Inspect ://inspect/# Devices go to the devices page
    3. Connect device Connect the Android device to be debugged via the data cable. Enable USB debugging of the device in developer mode and allow PC to debug the device
    4. Open the corresponding webViewchrome://inspect/#devicesPage to see the current WebView page address, click inspect, open the page debugging window can start debugging.Note: Chrome inspect is a developer tool for Google. You need to climb the wall to access it. You need to visit https://chrome-devtools-frontend.appspot.com to download the corresponding debugging resources, so make sure that the current network environment can access this address to debug normally.

  2. Safari development tools

    1. Open safari developer mode to normal PC safari has development option in the menu bar, if not, please refer to the following link to setup: jingyan.baidu.com/article/6da…
    2. Link aN ios device Link an ios device to be debugged using a data cable
    3. After configuring the ios device to connect to the device, open System Settings -> Safari -> Advanced -> Web Inspector -> Open ->PC Browser click Development -> Find debugging Device -> Click For Development -> Debug Device click Trust
    4. Start Debugging Open the web page of the device, locate the corresponding page in the PC browser, and click debug

4. Enable TBS debugging permissions

  1. How to use inspect or Safari development tools to debug wechat internal pages
    1. Authorization, open the address debugmm.qq.com/?forcex5=tr…
    2. Open the debugx5.qq.com in wechat
    3. Click on theinformation, you can view the functions to be authorized
  2. How do I enable the vConsole function of the applet? Repeat step 2.3 above. Click the information and select the corresponding permission
  3. How do I view the current X5 kernel version and related updates

As a front-end engineer, the specific use of these debugging tools is not more verbose, I hope you slowly explore, of course, the basic function and Chrome check is the same.