调试技巧sourcemap和定位相关
1. webpack的完整sourcemap
调试代码,要映射回原始文件,devtool的sourcemap模式是不行的,会丢失loader的映射信息,导致映射结果是一个半源码半编译的文件,cheap-module-source-map可以,cheap只需要行信息,module会关联loader的sourcemap,能拿到完整的sourcemap
2. 添加sourcemap文件后,要清除缓存
清掉 node_modules/.cache 下的缓存,重新跑 dev server
3. 拉取分支加速技巧
git clone --depth=1 --single-branch git@xxx.git
--depth=1 是只下载单个 commit,--single-branch 是下载单个 branch,这样下载速度能快几十倍,是一个加速小技巧
4. 定位库的源码可使用事件断点
5. 定位react库源码可在render函数入口打断点,通过回溯定位
6. node_modules改动可以保存并提交git
执行npx patch-package 包名,会生成 patch 文件
patch 文件里记录了你对包的改动,这个可以上传到 git 仓库,其他小伙伴拉下来再执行 npx patch-package 就会自动应用这些改动
7. 添加sourcemap文件后通常会得到所有组件的映射结果,可以查看其他组件的源码
出处: