# Vue-vConsole-devtools
Vue-vConsole-devtools
是一款vConsole
插件,把Vue.js
官方调试工具vue-devtools
移植到移动端,可以直接在移动端查看调试Vue.js
应用
Preview
桌面使用:
移动端使用:
为什么需要本插件:
- 在Safari和移动端无法直接调试Vue.js
- Electron版本的devtools安装和远程调试配置非常麻烦
功能
- 移植了官方Vue-devtools的全部功能
- 针对移动端优化了部分操作方式
- 现已支持微信端内浏览器
使用方式
NPM方式引入
-
npm i -s vue-vconsole-devtools
-
在工程中入口文件 (如
src/main.js
)
...
import VConsole from "vconsole";
import { initPlugin } from 'vue-vconsole-devtools'
initPlugin(new VConsole()); // 需要在创建Vue根实例前调用
...
CDN方式引入
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-vconsole-devtools@1.0.5/dist/vue_plugin.js"></script>
<script>
var vConsole = new window.VConsole();
const Devtools = window.vueVconsoleDevtools
Devtools.initPlugin(vConsole);
</script>
高级用法
-
只在开发环境下引入
new Vue({ render: (h) => h(App), }).$mount("#app"); // 在创建跟实例以后调用, 需要借助webpack的异步模块加载能力 if(process.env.NODE_ENV === "development"){ Promise.all([import("vconsole"), import("vue-vconsole-devtools")]).then( (res) => { if (res.length === 2) { Vue.config.devtools = true; window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue) const VConsole = res[0].default; const Devtools = res[1].default; Devtools.initPlugin(new VConsole()); } } ); }
更新日志
v1.0.5
- 兼容CDN引入,优化引入方式
- 兼容ES6 解构运算符引入方式
v1.0.0
- 重大更新,升级Vue-devtools V6
- 兼容Vue3
v0.0.7
- 重要更新,解决iOS微信端浏览器兼容性问题
- 解决iOS阿里mPass容器兼容性问题
v0.0.3
- 优化了打包体积
TODO:
- 支持Vue.js 3
✅ - 开发脱离vConsole版本
- webpack plugin
### Sample code
欢迎添加微信 **OmniBug **探讨交流,Email: zippowangxinkai@gmail.com
## Contributors
wangxinkai |