调试痛点解析打包发布的代码，无法定位对应源码位置痛点一：JS报错，无法定位源码痛点二：css压缩后，无法定位源码css(css-loader),less(less-loader),sass(sass-loader),postcss-loadersouceMap原理分析将打包后的代码与源码关联起来，可以看到原始文件的具体位置（路径，行，专栏）csssourceMapeffect在查看元素时，可以轻松定位到源码位置jssourceMapeffect高级调试技巧通过sourceMap已经知道源码路径，关联chrome和webstorm在ide中自动打开指定文件如何实现开启sourceMap，将webpack.config.js中devtool的属性设置为source-map。sourceMap的不同效果Effect1:sourceMapEffect2:devtool:'#eval-source-map可以点击查看vue-cliWebpack的源码在source://目录下查看FAQ上传sourceMap会不会加载变慢？结论：对于普通用户来说，不会变慢。原理：只有开启debug模式才会加载map文件。比如chrome调试工具开启的时候。为什么map文件在chrome控制台看不到请求？因为浏览器过滤掉了.map文件，但是在chrome控制台的source中可以看到map解析后的源文件内容。如何在本地调试在线代码？将本地sourceMap关联到指定文件，点击报错信息，跳转到文件内容，右键添加sourcemap，地址写入添加的地址：file:///Users/xz/Documents/code/myGithub/react-todoList/main添加.f5113e73.js.map后，切换回控制台面板，可以看到源代码保存的位置。点击跳转到指定目录。注意事项启用sourceMap后，打包会变得很慢。如果你确认你的项目不需要生成sourceMap，你必须关闭这个选项。umi默认是关闭的。参考资料webpack4系列教程，如何设置css的sourcemap？绝对的，我没想到一个sourcemap会涉及到这样的多知识盲JavaScriptSourceMap详解Chrome调试关联本地sourcemap文件
