source map 不是越全越好,排查和发布环境要分开选型
· 阅读需 3 分钟
webpack 配 source map 时,很多人最开始只有一个判断标准:能不能在浏览器里看到原始源码。可项目一大以后,你会发现 source map 其实牵连了很多事,构建速度、调试精度、错误定位、产物暴露范围,全都和它有关。选型如果只看“调试爽不爽”,很容易在发布阶段踩坑。
webpack 配 source map 时,很多人最开始只有一个判断标准:能不能在浏览器里看到原始源码。可项目一大以后,你会发现 source map 其实牵连了很多事,构建速度、调试精度、错误定位、产物暴露范围,全都和它有关。选型如果只看“调试爽不爽”,很容易在发布阶段踩坑。
页面一旦出现“点击没反应”或者“滚动明显发卡”,很多人会笼统地说这是性能问题。但性能问题如果只停在这个词上,其实没有任何帮助。对前端来说,更实用的还是先把问题拆开:是逻辑没走到,还是逻辑走到了但执行得太重。
2013 年前端开发已经越来越离不开浏览器开发者工具了。页面一出问题,如果不会用 DevTools,很多排查只能靠猜。
样式问题最容易让人陷入一种低效循环:改一处 CSS,刷新页面,看不对,再回去改下一处。尤其是接手别人留下来的页面时,选择器层级多、覆盖关系杂,如果只在源码里猜,很快就会迷路。
浏览器里出现白屏、按钮没反应、数据不显示时,很多人的第一反应还是回编辑器里盯代码。但真到项目节奏快的时候,这种做法经常会让人越看越散。Chrome DevTools 真正有用的地方,是它能先帮你把问题范围收住。