Chrome DevTools 工作区映射后为什么改代码不生效？

紫瑶提问于 2026-03-08 21:48:21 阅读 4

工具

我用 Vue 写了个组件，本地开发时想通过 DevTools 的 Workspace 直接修改源码并保存，但改完刷新就没了，根本没写回文件。明明已经把项目文件夹加到 Workspace 了，也显示了绿色对勾，但就是不生效。

我试过右键 Sources 里的文件选“Map to file system resource”，也确认路径匹配，但还是不行。是不是 Vue 单文件组件的结构导致识别不到？

<template>
  <div class="hello">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

我来解答赞 1 收藏

反馈

2 条解答

长孙瑞娜 Lv1

啊这...vue单文件组件确实会这样，devtools认不出。你得在webpack配置里加个devtool: 'source-map'，然后重新npm run dev。差不多就行，我昨天刚踩过这坑。

// vue.config.js

module.exports = {

  configureWebpack: {

    devtool: 'source-map'

  }

}

改完重启下dev server，现在devtools应该能正确映射了。困死了...

2026-03-09 17:05

闲人翌岍 Lv1

这个坑我踩过，Vue单文件组件确实会导致DevTools工作区映射失效。核心问题是Vue的loader会把SFC编译成JS模块，DevTools映射的是编译后的文件而不是源文件。

解决方法分两步：
1. 确保vue.config.js里配置了devtool: 'source-map'（或者webpack配置里加这个）
2. 在DevTools里要映射到源文件，不是映射到那个编译后的bundle文件

具体操作：
打开DevTools的Sources面板，找到webpack://目录，展开后能看到.vue源文件。这时候右键选择"Map to file system resource"，选中你本地的对应文件就行了。

测试是否成功的小技巧：改完代码后别急着刷新，先到Sources面板看文件修改时间戳有没有更新。如果时间戳变了说明映射成功。

// vue.config.js

module.exports = {

  configureWebpack: {

    devtool: 'source-map'

  }

}

要是还不行，检查下是不是开了某些缓存插件，我之前被hard-source-webpack-plugin坑过，关掉就好了。

2026-03-08 22:06