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)
  }