Vue Debug 小技巧

生产环境强制打开 Vue devtools

// 1.在先获取根节点Vue 实例
let el = document.querySelector('#app')||document.querySelector('#__nuxt')

let app = el.__vue__

// 2.获取该实例的构造函数
let Vue = app.constructor

// 3.获取Vue的基类
while (Vue.super) { Vue = Vue.super }

// 4.强制开启
Vue.config.devtools = true
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue

// 5.重新打开控制台面板即可

可以保存成为 snippet 方便下次使用

生产环境的 Vue 项目或者移动端 Debug 中无法使用 devtools 时 ,通过 $0 查看数据

Vue 项目有区分开发环境和生产环境，在生产环境下无法使用 Vue 官方的 Devtools ，但是又需要查看对应的状态，可以进行以下操作（需要对代码比较熟悉）。

找到对应 vue 组件 template 的根节点

在 devtools 中找到对应的节点

在 Element 面板点击对应节点，旁边会有一个 ==$0 的标记，在 devtool 中意味着可以通过 $0 访问到该 DOM 节点。

vue 特有的操作

在 Console 面板。输入 $0 可操作刚才的 DOM 节点。其中 `$0.vue是关键属性，因为 vue 会将组件实例挂在在对应的根节点 DOM 上的vue` 上，我们利用这一点就可以对组件进行各种操作了。

原理

vue 源码关键代码

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
   
   //以上省略
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // 以下省略
  }

代码很好理解，vue 在渲染更新后会将 vm 实例赋值在 vue 上，而 $el 则是对应的 dom 了。