在自己的项目中调试element-plus源代码

551 阅读1分钟

通过chrome调试工具,找到源码文件,并手动添加断点

image.png

image.png

image.png

可以简单查看代码执行流程以及数据变化,但无法修改源代码(即使修改了也无效),因为这里的这个代码是根据sourcemap文件生成出来的,改这个内容无意义

本地下载element-plus源码相关问题

安装依赖时出现

ERROR: Failed to set up Chromium r1036745! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.

解决方案

.npmrc添加

如下内容,任选一个

puppeteer_download_host=https://cdn.npmmirror.com/binaries
puppeteer-download-base-url=https://cdn.npmmirror.com/binaries/chrome-for-testing

Puppeteer国产镜像地址不能用了? - 掘金 (juejin.cn)

package.json中dependencies依赖来自本地文件(file:)

想通过这种方式调试element-plus源码,不可行。因为即使你package.json配置正确了,你启动项目之后还是会提示各种依赖缺失,别名无法识别

package.json中dependencies依赖来自本地文件(file:) - 掘金 (juejin.cn)

想通过 extends 修复 element-plus 相关组件bug

在vue3中不可行,因为element-plus组件大部分都是通过setup方式实现的, extends 方式替换不了setup中的内容