Vue.js 3 Composition API 调试：如何查看ref变量与setup内部逻辑

• 代码内打印的正确姿势
  直接在JS上下文里打印ref实例，只会输出包裹后的RefImpl对象，看不到存储的真实业务值，这也是很多人觉得"ref内容读不出来"的核心原因。打印ref值必须通过.value属性取实际存储的内容，示例：

  const pageLoading = ref(false)
  // 正确：直接输出原始业务值
  console.log('当前加载状态：', pageLoading.value)
  // 错误：只能看到RefImpl的封装结构，排查效率极低
  console.log('错误打印：', pageLoading)
  

• 修复DevTools无法查看ref的问题
  Vue DevTools只会扫描并展示setup()返回值中显式导出的响应式变量。如果你的ref是定义在嵌套异步回调、内部工具函数的独立作用域里，或是根本没被写到return对象中，DevTools是不会识别到的。
  如果已经确认所有ref都正确导出还是看不到，检查下安装的Vue DevTools扩展版本，过低版本对组合式API的状态识别有兼容bug，升级到最新版就能正常展示所有ref、reactive、computed的内容。
• 开发期快捷调试技巧
  可以把需要排查的ref临时挂到全局对象上，不用反复改代码加日志，随时在控制台调取查看：

  if (import.meta.env.DEV) {
    // 控制台输入__debugRefs 即可展开查看所有挂载的ref实例
    window.__debugRefs = {
      pageLoading,
      tableData,
      searchKeyword
    }
  }
  

• 用浏览器原生断点逐行跟踪
  打开开发者工具的Sources面板，找到对应组件的源文件，在setup函数开头、关键逻辑分支、return语句位置打个断点。触发页面加载逻辑后，就能逐行确认代码走到哪一步、每个节点的变量值是多少，这种方式比反复打console.log靠谱得多，能快速定位"API请求成功但组件不渲染"这类没有显性报错的问题。
• 排查静默执行异常
  如果setup里用了顶层await语法，组件外层必须包裹组件，不然异步逻辑执行完之前组件根本不会挂载，控制台也不会抛出明确错误。可以在setup的每个关键节点打标记日志，确认代码是不是顺利走到了return语句，有没有在某个异步分支直接卡住。
• 排查响应式失效问题
  检查所有JS逻辑（事件回调、异步请求回调、计算属性内部）里对ref的读写，有没有漏写.value。一旦漏写，会直接把RefImpl实例本身当普通值传给模板或子组件，导致渲染结果不对，而且不会触发控制台报错。

内容的提问来源于stack exchange，提问作者volume one