高级线上调试
如下 线上调试 先安装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能找到对应的组件中定义的名字
