Pilot Webview Debug

2022-07-19
No Rating

There are currently 2 ways to debug the webview pages embedded in PILOT.

  1. Use the chrome devtools tool.
  2. Use Tencent's open source vConsole plug-in, the plug-in is easy to install, you can install it directly with npm. The overall effect is similar to PC browser debugging. There is also a webpack plugin vConsole webpack-plugin which is encapsulated on the basis of Tencent vConsole. This plugin can automatically add the vConsole debugging function through webpack configuration, which is more convenient and practical.

Computer Side Debug through Chrome Devtools

  • After installing the chrome browser, enter chrome://inspect/#devices in the address bar, and you can see the device to be debugged on the Devices page. Then click "inspect" of the page to be debugged to see the debug page. If the page debugging tool does not display properly, you need to turn on your browser's developer mode first, go to the third-party Cloud page and click on the top title bar continuously.


vConsole

The vconsole-webpack-plugin has reduced functionality compared to Tencent's native vConsole, so if you need all the features, you can download Tencent's native vConsole.

vConsole: githubopen in new window

  • Features

    1. View console log.
    2. View requests.
    3. View the element structure of the page.
    4. View cookies, local storage and session storage.
    5. Execute JS commands manually.
  • Installation

    $ npm install vconsole-webpack-plugin --save-dev
    

    Then add the following plugin configuration in the webpack.conf.js or webpack.dev.conf.js file configuration.

    var vConsolePlugin = require('vconsole-webpack-plugin'); 
    
    module.exports = {
        ...
    
        plugins: [
            new vConsolePlugin({
                filter: [],  // Entry files to be filtered.
                enable: true // Remember to change back to false before the project goes live.
            }),
            ...
        ]
        ...
    }
    

    After recompiling the front-end code, you can see the vConsole button in the bottom right corner of the interface.

    Note: vConsole is recommended to run in development and test environments. Deploying to a production environment requires that vConsole be turned off.