如何在Vue.js中获取详细调试信息，定位控制台模糊报错位置

1 配置Source Map实现业务代码定位 #

没有正确配置Source Map是报错堆栈只指向Vue runtime文件、无法定位业务代码的核心原因，根据你的构建工具做对应配置即可：

• Vite 项目：在vite.config.js中添加配置

export default defineConfig({
  server: {
    sourcemap: true
  },
  build: {
    sourcemap: true
  }
})

• Vue CLI 项目：在vue.config.js中添加配置

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

配置完成后重启开发服务，报错堆栈就会显示你自己写的业务文件路径和对应行号。

2 新增全局错误捕获钩子 #

在项目入口文件main.js中配置Vue全局错误处理，主动输出错误对应的组件信息：

const app = createApp(App)
app.config.errorHandler = (err, vm, info) => {
  console.error('错误详情：', err)
  console.error('出错组件：', vm?.$options.name || '未命名组件')
  console.error('错误触发场景：', info)
}
app.mount('#app')

该钩子可以捕获组件渲染错误、生命周期钩子错误、事件处理函数错误等绝大多数场景的异常，直接给出出错的组件名，不需要从 runtime 堆栈反向推导。

3 你当前遇到的 Cannot read properties of null (reading 'emitsOptions') 报错排查方向 #

该报错本质是Vue在更新组件时，目标组件实例已经被销毁为null，优先排查以下场景：

• 所有用v-if控制显示隐藏的组件，是否存在组件已经被v-if销毁后，还在尝试更新它的props、触发它的emit事件的逻辑
• 异步组件、动态<component :is="xxx">的加载逻辑，是否存在实例未完成挂载就触发更新的操作
• 定时器、接口请求回调等异步逻辑中，是否引用了已经被卸载的组件实例

4 Vue DevTools 适配配置 #

如果你安装的是旧版Vue DevTools，仅支持Vue2，需要升级到适配Vue3的Beta版本。同时在main.js中主动开启devtools配置：

app.config.devtools = true

开发环境不要开启production模式，否则DevTools会默认关闭识别。

5 常用调试技巧 #

• 在可疑的业务代码位置添加debugger语句，触发错误时浏览器会自动在对应位置断住，可逐行回溯变量状态
• 对于响应式变量异常变更导致的错误，可以给对应变量加watch监听，在监听回调中加断点，追踪变量的修改时机
• 排查组件销毁相关问题时，可以在组件的onUnmounted生命周期中加日志，确认组件销毁的时机是否符合预期

内容的提问来源于stack exchange，提问作者Joel G Mathew