dolphin-weex-console v0.2.1

dolphin-weex-console

weex GUI 开发调试工具

安装

  npm i dolphin-weex-console -S

使用方法

1. 在入口文件中注册组件

   import { mockWConsole } from 'dolphin-weex-console'
   ...
   Vue.use(mockWConsole)

2. 在业务代码中使用组件

   <template>
     <div>
       ...
       <!-- 建议放置在最后一层，以保证层级最高 -->
       <w-console></w-console>
     </div>
   </template>
   <script>
   // 某些 console.log 会在 Vue.use(mockWConsole) 之前执行，若仍需打印在，可手动导入 wconsole 并打印
   import { wconsole } from 'dolphin-weex-console'
   wconsole.log('xxx')
   ...
   
   export default {
     ...
     mounted() {
       // 可以采用Vue全局函数调用，也可采用weex.wconsole调用
       const name = 'zhangsan'
       weex.wconsole.log('test -log',name)
       this.$wconsole.log('test in vue instance', name)
     }
   }
   </script>

3. 配置环境变量，以避免该调试工具在生产环境中展示
   a. 在开发环境的启动命令中，添加NODE_ENV=development,在页面中显示 wConsole 按钮
   b. 在生产打包命令中，NODE_ENV 设置为其他值, 打包后页面将不展示 wConsole 按钮，从而无需在生产打包时，将上述两个步骤中的代码删除。

   // package.json
    "scripts": {
     "serve": "cross-env --env.NODE_ENV=development",
     "build": "cross-env --env.NODE_ENV=production",
   }

依赖环境

美的美居app

功能

1. 打印和查看日志，支持四种日志类型 log， info, warn, error, 支持日志复制功能，将触发weex内部console打印
2. 系统信息查看， 在 System 中可以查看当前设备的信息，支持复制
3. 缓存操作， 支持 查看当前所有缓存，复制， 删除当前全部缓存数据
4. 页面刷新功能
5. Vue错误捕获，通过 Vue.config.errorHandler 对当前错误进行捕获并打印到调试功能中，具体使用步骤如下：

  // xxx.entry
  import { mockWConsole, bus } from 'dolphin-weex-console'
  ...
  // 考虑到业务代码中可能已经存在对Vue.config.errorHandler的操作，为避免覆盖，需自行将错误信息传递
  Vue.config.errorHandler = function(err, vm, info) {
    err.info = info
    bus && bus.emit('VueError', err)
  }