锐客网

  1. 首页 > it技术 > >

sourceMap原理解析，快速定位压缩的源代码

调试痛点解析

打包发布后的代码，无法定位到对应源码的位置
痛点一：js 报错，无法定位源代码 sourceMap原理解析，快速定位压缩的源代码
文章图片

sourceMap原理解析，快速定位压缩的源代码
文章图片

痛点二：CSS 压缩后，无法定位源代码
css(css-loader) , less(less-loader), sass(sass-loader) , postcss-loader
sourceMap原理解析，快速定位压缩的源代码
文章图片

souceMap 原理解析 把打包后的代码和源代码做一种关联，在chrome浏览器调试界面和上报错误信息里可以看到原始文件的准确位置（路径，行，列）
sourceMap原理解析，快速定位压缩的源代码
文章图片

sourceMap原理解析，快速定位压缩的源代码
文章图片

css sourceMap效果 在审查元素时，可以方便的定位到源码位置
sourceMap原理解析，快速定位压缩的源代码
文章图片

js sourceMap效果 高级调试技巧
  • 通过sourceMap已经知道了源码路径，通过chrome和webstorm的方式进行关联，自动在ide中打开指定文件
sourceMap如何开启 设置 webpack.config.js 中 devtool的属性为 source-map即可
sourceMap原理解析，快速定位压缩的源代码
文章图片

sourceMap的不同效果 效果一：sourceMap
sourceMap原理解析，快速定位压缩的源代码
文章图片

效果二：devtool: '#eval-source-map
【sourceMap原理解析，快速定位压缩的源代码】sourceMap原理解析，快速定位压缩的源代码
文章图片

能够点击查看

vue-cli的源码在 source中的 webpack:// 目录中查看
sourceMap原理解析，快速定位压缩的源代码
文章图片

常见问题 上传souceMap会导致加载变慢吗？ 结论：普通用户，不会变慢
原理：只有在开启debug模式是map文件才会加载，比如打开chrome的调试工具
.map文件为什么在chrome控制台看不到请求？ 因为浏览器把 .map文件过滤掉了，但是可以在chrome控制台的souce内看到map解析后的源文件内容
本地如何调试线上代码？ 把本地的souceMap 和指定文件进行关联
  • 点击报错信息，跳转到文件内容
  • 右键添加souce map
  • 把地址写入添加的地址：file:///Users/xz/Documents/code/myGithub/react-todoList/main.f5113e73.js.map
  • 添加完成之后，再切换回console面板，可以看到源码保存的位置，点击可跳转到指定目录
sourceMap原理解析，快速定位压缩的源代码
文章图片

sourceMap原理解析，快速定位压缩的源代码
文章图片

注意事项
  • 开启sourceMap后，会导致打包变的很慢，如果确认你的项目不需要生成sourceMap一定要把这个选项关闭，umi默认是关闭的
参考资料
  • webpack4系列教程，如何设置css的sourcemap？
  • 绝了，没想到一个 source map 居然涉及到那么多知识盲区
  • JavaScript Source Map 详解
  • Chrome调试关联本地sourcemap文件

    推荐阅读


    上一篇：seata分布式事务TCC模式介绍及推荐实践

    下一篇：适用于 Flutter 的 Google 移动广告 SDK 正式版现已发布