#码力全开·技术π对#Web技术(Chrome):Chrome DevTools中Source Map无法映射原始代码的调试方法?

Chrome DevTools中Source Map无法映射原始代码的调试方法?

Chrome
鱼弦CTO
2025-08-12 09:13:07
浏览
1
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
key_3_feng
key_3_feng

可按以下步骤排查:

  1. 检查Source Map文件路径:在Network面板确认​​.map​​文件是否成功加载(无404错误),确保构建工具(如Webpack)生成的路径与代码中引用的路径一致。
  2. 禁用缓存:在DevTools的Network面板勾选“Disable cache”,避免旧缓存干扰。
  3. 验证Source Map有效性:右键代码文件 → “Save as”保存压缩代码和Source Map文件,使用在线工具(如​​Sourcemaps Viewer​​)验证映射是否正确。
  4. 检查构建配置:确保构建工具(如Babel、UglifyJS)未破坏Source Map生成,必要时添加​​sourceMap: true​​配置。
  5. 手动绑定映射:在Sources面板点击“+”号,手动加载源代码文件并关联Source Map。





分享
微博
QQ
微信https://www.51cto.com/aigc/
回复
7天前
发布
相关问题
提问