首页 > 技术文章 > Chrome DevTools 为混淆的文件添加 SourceMap

yinyuxing 2022-01-05 14:22 原文

发布到生产环境的工程常常是经过混淆且不提供 source map 文件的,这样当生产环境发生问题后很难地位问题。
以下的方法可以将本地的 source map 文件关联到线上的混淆文件,从而方便调试和问题定位。

  1. 本地工程 build 生成包含 SourceMap 的 dist 目录
  2. 使用 http-server 作为服务器发布 dist
  3. 在 Chrome DevTools 的 Sources 中选择需要添加 SourceMap 的文件
  4. 在右侧文件窗口中右键并选择 Add source map...
  5. 在弹出的输入框 Source map URL 中写入第 2 步 http-server 提供的对应的 source map 文件地址

推荐阅读