# weex GUI 开发调试工具

# 安装

  npm i dolphin-weex-console -S

# 使用方法

在入口文件中注册组件

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

1
2
3
4

在业务代码中使用组件

<template>
  <div>
    ...
    <!-- 建议放置在最后一层，以保证层级最高 -->
    <w-console></w-console>
  </div>
</template>
<script>
...
export default {
  ...
  mounted() {
    // Vue实例中可采用Vue全局函数调用，也可采用weex.wconsole调用
    const name = 'zhangsan'
    weex.wconsole.log('test -log',name)
    this.$wconsole.log('test in vue instance', name)
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TIP

由于js执行顺序，有些console.log 可能会先于Vue.use(mockWConsole)执行，即wconsole尚未绑定到weex中，可手动导入、打印

import { wconsole } from 'dolphin-weex-console'
wconsole.log('xxx')

1
2

考虑到weex项目是多页应用，除了提供全局注册，也提供了页面按需注册

<template>
  <div>
    ...
    <w-console></wconsole>
  </div>
</template>

<script>
import { wConsole, wconsole } from 'dolphin-weex-console' 

export default({
  components: {
    wConsole,
  },
  mounted() {
    wconsole.log('page mounted')
  }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

配置环境变量，以避免该调试工具在生产环境中展示
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",
}

1
2
3
4
5

# 依赖环境

美的美居app

# 功能

打印和查看日志，支持四种日志类型 log， info, warn, error, 支持日志复制功能，将触发weex内部console打印
系统信息查看，在 System 中可以查看当前设备的信息，支持复制
缓存操作，支持查看当前所有缓存，复制，删除当前全部缓存数据
页面刷新功能
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.emit('VueError', err)
  }

1
2
3
4
5
6
7
8
9

效果如下：

移动端效果预览:

平板设备效果预览:

TIP

若遇到视频播放不了，请先确认当前网络是否限制视频播放（可以通过切换网络来确定）
上述平板设备预览效果是基于viewport=1536实现

← logcat查看日志项目发布 →