Yang

Appearance

生产环境调试Vue ​

生产环境如何开启 devtools 本地开发环境中，devtools 是默认开启的，而生产环境中默认关闭。打包时不建议手动开启该配置。遇到生产环境需要调试的，可通过开发者工具更改配置项临时开启

一键开启 Vue2, Vue3 devtools ​

打开控制台，输入下列代码，回车执行

注意

关闭控制台，再打开控制台，就有了 （注意不要刷新页面）

ts
let Vue, node
const walker = document.createTreeWalker(document.body, 1)

// eslint-disable-next-line no-cond-assign
while ((node = walker.nextNode())) {
  const vue2 = node.__vue__
  const vue3 = node.__vue_app__

  if (vue2 ?? vue3) {
    const Vue = vue2 ? vue2.$options._base : vue3

    if (Vue.config.devtools)
      break

    const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
    if (hook) {
      console.log(`Vue 版本: ${Vue.version}`)
      Vue.config.devtools = true

      if (vue2) {
        Vue.config.productionTip = true
        hook.emit('init', Vue)
      }
      else {
        hook.emit('app:init', Vue, Vue.version, {
          Fragment: 'Fragment',
          Text: 'Text',
          Comment: 'Comment',
          Static: 'Static'
        })
      }
    }
  }
}
let Vue, node
const walker = document.createTreeWalker(document.body, 1)

// eslint-disable-next-line no-cond-assign
while ((node = walker.nextNode())) {
  const vue2 = node.__vue__
  const vue3 = node.__vue_app__

  if (vue2 ?? vue3) {
    const Vue = vue2 ? vue2.$options._base : vue3

    if (Vue.config.devtools)
      break

    const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
    if (hook) {
      console.log(`Vue 版本: ${Vue.version}`)
      Vue.config.devtools = true

      if (vue2) {
        Vue.config.productionTip = true
        hook.emit('init', Vue)
      }
      else {
        hook.emit('app:init', Vue, Vue.version, {
          Fragment: 'Fragment',
          Text: 'Text',
          Comment: 'Comment',
          Static: 'Static'
        })
      }
    }
  }
}