调试技巧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文件后通常会得到所有组件的映射结果,可以查看其他组件的源码

 

 

 

出处:

为什么说 90% 的前端不会调试 Ant Design 源码 

我是怎么调试 Element UI 源码的

posted @ 2023-11-22 15:43  全玉  阅读(39)  评论(0编辑  收藏  举报