zippowxk / vue-devtools-plugin Goto Github PK

View Code? Open in Web Editor NEW

223.0 223.0 30.0 86.21 MB

Vue-devtools Plugin For vConsole & Eruda ( vConsole & Eruda 的 Vue-devtools 插件 )

JavaScript 65.96% HTML 0.51% Vue 14.50% Stylus 0.29% Shell 0.01% TypeScript 18.67% CSS 0.06%

cross-platform debug devtools eruda eruda-plugin plugin vconsole vue vue-devtools vue2 vue3 vuejs

vue-devtools-plugin's Introduction

# Vue-devtools-plugin

Vue-devtools-plugin 是一款vConsole & Eruda 插件，把Vue.js官方调试工具vue-devtools移植到移动端，可以直接在移动端查看调试Vue.js应用

For Eruda

Preview

CodePen Sample Code for Vue2

CodePen Sample Code for Vue3

桌面使用：

移动端使用：

为什么需要本插件：

在任意浏览器和移动端上查看调试Vue.js应用
无需在浏览器安装Vue-devtools插件
支持Vue2 & Vue3

功能

移植了官方Vue-devtools的全部功能
针对移动端优化了部分操作方式
现已支持微信端内浏览器

使用方式

NPM方式引入

vConsole: yarn add vue-vconsole-devtools --dev Eruda: yarn add eruda-vue-devtools --dev
在工程中入口文件（如src/main.js）

...
// vconsole
import VConsole from "vconsole";
import { initPlugin } from 'vue-vconsole-devtools' // for vconsole

initPlugin(new VConsole()); // 需要在创建Vue根实例前调用
...

...
// eruda
import { initPlugin } from 'eruda-vue-devtools' // for eruda
import eruda from 'eruda' // 引入工具包

eruda.init() // 初始化
initPlugin(eruda); // 需要在创建Vue根实例前调用
...

如果devtools中没有加载出你的应用请添加如下代码

// Vue 2.x
Vue.config.devtools = true;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue)

CDN方式引入

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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());
       }
     }
   );
 }

更新日志

1.0.9

兼容了vConsole 3.14之后的新版本
更新Vue-devtools 6.5.0 支持更新的功能
更新之后解决了遗留的一些问题

v1.0.5

兼容CDN引入，优化引入方式
兼容ES6 解构运算符引入方式

v1.0.0

重大更新，升级Vue-devtools V6
兼容Vue3

v0.0.7

重要更新，解决iOS微信端浏览器兼容性问题
解决iOS阿里mPass容器兼容性问题

v0.0.3

优化了打包体积

### Sample code

Github

欢迎添加微信 **OmniBug **探讨交流，Email: [email protected]

vue-devtools-plugin's People

Contributors

Stargazers

Watchers

vue-devtools-plugin's Issues

1 手机端浏览器打开vconsole-vue面板，一直处于loading状态

feat: 可以通过 cdn 的方式使用吗?

移动端vuex数据未展示，但是chrome中正常

版本 90.0.4430.212（正式版本） (x86_64)
在chrome中能够正常展示数据

但是在移动端（微信，夸克）无数据
ios 14.6 wechat 8.0.6 夸克 5.0.0.1194

vuex数据未显示

插件识别不了装饰器写法的vue组件名称

vue版本2.x
Chrome 的vue-dev-tool 版本5.3.4

使用vue-property-decorator支持的TS写法，在线上环境中识别不了组件名称
@Component export default class ComponentName extends Vue {}
具体表现为

但是在dev本地开发环境上是可以识别的到组件名称

<script>
      // 通过链接参数或者sessionStorage开启调试
      (function () {
        if (!/debug=true/.test(window.location) && sessionStorage.getItem('debug') !== 'true') return;
        document.write('<script src="https://unpkg.com/vconsole" onload="new window.VConsole()"><\/script>');
        document.write('<script src="https://unpkg.com/vue-vconsole-devtools" onload="window.vueVconsoleDevtools.initPlugin(VConsole.instance);"><\/script>');
      })();
</script>

启动项目控制台报错

[Error] TypeError: null is not an object (evaluating 'l.contentWindow')
	onReady (vue_plugin.js:1:12825040)
	trigger (vue_plugin.js:1:128227)
	（匿名函数） (vconsole.min.js:10:278259)
	（匿名函数） (vconsole.min.js:10:276647)
	a (vconsole.min.js:10:274886)

指定[email protected]版本无此报错；

启动vue-devtools在safari浏览器（版本16.1 ）报错：

TypeError: undefined is not an object (evaluating 'browser.runtime.onMessage.addListener')

具体可看我的仓库https://github.com/zhang-shaoqiang/uni-app-vite.git

项目无法运行

这个项目需要npm，node，yarn分别什么版本才可以跑起来？

在Vue3项目中使用，报错：无法找到模块“vue-vconsole-devtools”的声明文件

代码：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VConsole from "vconsole"
import { initPlugin } from 'vue-vconsole-devtools' // 这句代码报错

import './assets/main.css'

new VConsole()
// initPlugin(new VConsole())

createApp(App).mount('#app')

具体的报错信息如下：

无法找到模块“vue-vconsole-devtools”的声明文件。“/Users/nimohe/Documents/web-space/vue3-study/ts-vue3-demo/node_modules/vue-vconsole-devtools/dist/vue_plugin.js”隐式拥有 "any" 类型。
尝试使用 npm i --save-dev @types/vue-vconsole-devtools (如果存在)，或者添加一个包含 declare module 'vue-vconsole-devtools'; 的新声明(.d.ts)文件ts(7016)

开发环境：

Vue 3.2.45
Vite 3.2.4
vue/cli 5.0.8

<div id="app"></div>
    <script src="https://open-doc.welink.huaweicloud.com/docs/jsapi/2.0.6/hwh5-cloudonline.js"></script>
    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue_plugin.js"></script>
    <script>
      var vConsole = new window.VConsole();
      const Devtools = window.vueVconsoleDevtools
      Devtools.initPlugin(vConsole);
    </script>

pc端截图：

手机端截图：