目前DJI Pilot 2内嵌的webview页面调试方式有2种。

1. 使用chrome devtools工具。
2. 使用腾讯开源的vConsole插件，该插件安装简单，直接采用npm安装即可。整体效果跟PC端浏览器调试差不多。另外还有基于腾讯vConsole的基础上封装的webpack插件 vconsole-webpack-plugin，这个插件通过webpack配置即可自动添加vConsole调试功能，更加方便实用

电脑端基于Chrome Devtools调试

• 安装完chrome浏览器之后，在输入栏中输入 chrome://inspect/#devices， 在Devices页面就可以看到要调试的设备了。然后点击要调试页面“inspect”即可看到调试页面。如果页面调试工具无法正常显示，需要先开启浏览器的开发者模式，进入浏览器页面，连续点击顶部中心处。

基于vconsole插件调试

vconsole-webpack-plugin插件相比腾讯原生的vConsole功能会有所删减，若需要全部功能的开发者可以下载腾讯原生的vConsole。

腾讯vConsole的github仓库地址：地址

• vConsole的特性：

  1. 查看console日志
  2. 查看网络请求
  3. 查看页面element结构
  4. 查看cookies、localstorage、session storage
  5. 手动执行JS 命令行

• vconsole-webpack-plugin安装

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

  然后在webpack.conf.js或者webpack.dev.conf.js文件配置里增加以下插件配置。

  // 引入插件
  var vConsolePlugin = require('vconsole-webpack-plugin'); 
  
  module.exports = {
      ...
  
      plugins: [
          new vConsolePlugin({
              filter: [],  // 需要过滤的入口文件
              enable: true // 发布代码前记得改回 false
          }),
          ...
      ]
      ...
  }
  

  重新编译前端代码之后，就可以在界面中右下角看到vConsole按钮了。

  注意：vConsole建议在开发和测试阶段运行，部署到生产环境下，就需要把vConsole关闭