高级线上调试

如下 线上调试 先安装devtools 然后粘贴下列脚本到控制台 刷新即可

vue3

const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__
const version = app.version
const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
devtools.enabled = true
devtools.emit('app:init', app, version, {})

vue2

const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__
const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
const Vue = Object.getPrototypeOf(app).constructor
while (Vue.super) {
  Vue = Vue.super
}
Vue.config.devtools = true
devtools.emit('init', Vue)

app.config.globalProperties.$log = console.log

watch使用console.trace() 查看调用栈

<script setup>
watch(source, callback, {
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  },
})

watchEffect(callback, {
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  },
})

onRenderTracked((event) => {
  console.log(event)
})

onRenderTracked((event) => {
  console.log(event)
})
</script>

vueDevtools

选中组件$vm标识当前的选中的vm的实列

$vm.type.name能找到对应的组件中定义的名字 

![image.png](https://img.haomeiwen.com/i2531512/3d9eb4c0c3f60fa1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)