直接在关键响应式字段加日志是最轻量可控的依赖链追踪方式，通过console.trace、watch监听、onTrigger和readonly包裹props四法，精准定位读写源头与调用链。

直接在关键响应式字段上加日志，是最轻量、最可控的依赖链追踪方式。它不依赖工具插件，也不修改业务逻辑结构，适合快速定位“谁读了、谁改了、在哪改的”这三个核心问题。

给 ref 或 reactive 字段打 trace 日志

对怀疑有异常变更的响应式变量，手动插入 console.trace()，让浏览器自动打印调用栈，精准落到业务代码行：

• 对 ref：在赋值前加日志，例如 count.value = newVal; console.trace('count changed by:')
• 对 reactive 对象：用 proxy 包裹或直接在 set 拦截中打印，比如在自定义响应式包装里写 console.trace('user.name set to', value)
• Chrome 控制台右键该 trace 日志 → “Blackbox content scripts”，可过滤 Vue 内部调用，只留你自己的函数调用路径

用 watch 配合 immediate 和 trace 动态监听

无需改源码，把目标响应式对象挂到 window 上，再用 watch 实时捕获读写行为：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 挂载示例：window.debugUser = reactive({ name: 'Alice' })
• 监听读取：watch(() => window.debugUser.name, () => console.log('name 被读取'), { immediate: true })，首次渲染即触发，确认是否进入依赖收集
• 监听修改：watch(() => window.debugUser.name, (n, o) => console.trace('name 从', o, '变为', n))，trace 输出完整调用链，包括组件方法、事件回调、API 成功钩子等

结合 onTrigger 查看触发上下文（仅开发环境）

Vue 3 提供 onTrigger 选项，可在 watch、computed 或 effect 中启用，它会在依赖被修改时返回详细元信息：

立即学习“前端免费学习笔记（深入）”；

• 回调参数包含 event（'set'/'add'/'delete'）、target（原始对象）、key（属性名）、newValue/oldValue、receiver（代理对象）
• 示例：监控 user.profile.avatar 变更时，能明确看到是哪个 effect 触发、来自哪一行代码、改的是哪个 key
• 注意：必须确保构建开启了 devtools: true（Vue CLI 默认开启），且不可用于生产环境

用 readonly 包裹 props 防止意外修改干扰追踪

props 是常见误改源头。一旦被内部逻辑直接赋值，会绕过响应式系统，导致依赖链断裂、日志失效：

• 在 setup 中显式用 readonly(props) 包裹，任何尝试修改都会在控制台报错，立刻暴露问题位置
• 配合日志使用，能区分出“合法更新”（来自 emit 或父组件重传）和“非法篡改”（子组件内部直接改 props）
• 错误写法：props.count++；正确做法：emit('update:count', props.count + 1)