Chrome DevTools Sources标签无法显示实际Vue调试文件求助

1. 确认Source Map配置正确 #

开发环境必须启用Source Map，才能让浏览器把编译后代码映射回原文件：

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

  module.exports = {
    configureWebpack: {
      devtool: 'eval-cheap-module-source-map' // 开发环境推荐，兼顾速度与映射准确性
    }
  }
  

• Vite项目：在vite.config.js中确保：

  export default {
    server: {
      sourcemap: true
    }
  }
  

修改后重启开发服务器。

2. 用Vue DevTools直接定位原文件 #

安装Chrome的Vue DevTools扩展后：

• 打开DevTools的Components标签，找到目标组件
• 点击组件右上角的「打开编辑器」图标（或右键组件选「查看源码」），直接跳转至原.vue文件
• 也可点击组件内的代码片段，快速定位对应位置

3. 在Sources面板中找原文件 #

别盯着打包后的bundle文件，直接找源码目录：

• Vue CLI/webpack项目：在Sources面板的webpack:// → . → src目录下查找.vue文件
• Vite项目：在Sources面板的localhost:xxxx（你的开发端口） → src目录下查找

4. 排查缓存问题 #

• 按Ctrl+Shift+R强制刷新页面，清空浏览器缓存
• 关闭并重新打开Chrome DevTools
• 重启开发服务器，确保生成新的Source Map文件

5. 正确使用debugger语句 #

在.vue文件的<script>标签内添加调试语句：

<script>
export default {
  mounted() {
    debugger; // 刷新后会直接停在原文件的这一行
  }
}
</script>

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