加入我们一起学习，每天进步
简单来说：配置sourcemap来调试源代码。 但很多人可能没有学过webpack，所以不太擅长。 我以前写过类似的文章。 推荐下面的文章。
我写了如何调试antd的源码，反响很好：
但是很多小伙伴写的是Vue，通常可能会用到Element UI组件库，所以这篇文章就讲一下如何调试Element UI的源码。
首先，我们使用 Vue CLI 创建一个 vue2 项目：
yarn global add @vue/cli
vue create element-vue-test
创建成功后，进入项目目录
安装element ui库并在入口导入：
然后使用App.vue中的按钮组件
之后yarn runserve运行开发服务，可以看到这样的页面：
Element UI 组件正确显示。
接下来调试按钮组件的源码，那么问题来了，我怎么知道断点在哪里呢？
我们可以知道的是，这个按钮会处理点击风暴，但是我们不知道风暴处理函数的代码在哪里。
在这种情况下，可以添加一个风暴断点：
在sources面板的Event Listener Breakpons中查看鼠标的点击事件elementui源码开发，即在所有点击事件的处理函数处进行break。
然后您再次单击按钮尝试：
你会发现它在风暴处理程序处破裂了。
当你知道这个组件处理哪些风暴，但不知道风暴处理函数在哪里时，可以使用风暴断点。
当然，这个风暴处理功能并不在组件中，因为Vue内部会做一些处理，然后交给组件来处理。
所以，我们首先要进入组件的风暴处理函数：
单步执行函数，再单步执行函数，再单步执行函数，再单步执行函数，代码会转到组件的风暴处理函数：
方法、计算、道具，这些显然都在源代码中。 但如果你再往上走两步，你就会发现它并不是原来的源码：
模板变成了render函数，还有其他组件的代码，明显是编译打包的代码。
从文件名也可以看出：
这是一个将所有组件代码编译并打包在一起的文件。
就算能这样调试，也一定不舒服吧。 可以直接调试组件的原始源码吗？ 是带有模板的单文件组件吗？
是的，必须使用sourcemap。
sourcemap 在编译过程中形成：
它记录了目标代码和源代码之间的映射关系，可以在调试时用来映射回源代码：
但是如果你去node_modules，你会发现这个文件没有sourcemap：
那么如何生成它的sourcemap呢？
这需要从源代码重新编译。
我们从github下载了它的源码：
git clone --depth=1 --single-branch git@github.com:ElemeFE/element.git
--depth=1是只下载单个commit，--single-branch是下载单个branch，这样下载速度可以快几十倍，这是一个快速的技巧。
进入element目录并安装依赖项。 你会遇到经常出现的后端头痛问题。 node-sass安装报错：
解决这个问题的办法就是将node版本切换到node-sass版本对应的版本。
可以看到package.json中的node-sass是4.11.0
打开node-sass的github主页：
你会看到这样一个版本对应表：
4.11对应node11，那么只需将node切换到11即可。
然后yarn安装依赖就可以再次成功了。
然后开始编译，可以在npm scripts中找到dist命令，该命令用于构建源代码：
但我们只需要 element-ui.common.js 文件：
事实上，只需要执行脚本的一部分，即：
所以在项目下执行npx webpack --config build/webpack.common.js：
然后你可以在lib下看到构建产品：
但我们的目标是用source-map生成代码，所以我们需要更改配置：
修改 build/webpack.common.js 并将 devtool 配置为 Cheap-module-source-map：
source-map是生成sourcemap并关联起来，即：
module就是将中间加载器生成的sourcemap合并到最终的sourcemap中，这样就可以直接映射到源代码了。
Cheap用于提升编译速度，只保留行的映射信息。
更改配置后，再次运行yarn run dist，就可以看到带有sourcemap的产品：
将这两个文件复制到测试项目的node_modules/element-ui中并覆盖之前的：
然后清除node_modules/.cache下的缓存并再次运行开发服务器：
这时会报错提醒你node版本太低，需要将node版本改回来：
运行开发服务后elementui源码开发，按照之前的形式再次调试按钮组件的源码：
你会发现当前的组件代码是模板语法的单文件组件的代码！
这就是源映射的作用。
然后您就可以在该组件中断点后进行调试。
有的朋友可能会问，通过暴风断点单步进入组件有点麻烦，有没有更简单的形式呢？ 而且，按钮组件有点击干扰，但有些组件没有。 如何调试这些组件呢？
确实，有了sourcemap，就有了更简单的调试方法。
可以看到sources左侧的ELEMENT目录下有很多vue文件，Chrome DevTools解析完sourcemap后可能会列在这里：
可以直接在里面断点调试。
例如我们添加一个tab组件：
去掉上面添加的storm断点，在代码中自动设置断点：
然后你会发现可以调试Element UI组件的源码了！
当然，当某些组件找不到时，仍然可以通过storm断点的方法单步进入该组件。
我们通过 Chrome DevTools 对其进行调试。 其实用VSCode Debugger调试也是一样的。 Chrome DevTools 中设置的断点也会在 VSCode 调试器中被破坏。
总结
今天我们调试了Element UI的源码。
定位组件的代码是通过storm断点的方法，因为我们知道它触发了哪些storm，但是不知道storm处理函数在哪里。
但组件代码是编译打包的，不是原始源代码。
为了调试原始源代码，我们下载了Element UI的代码，并使用sourcemap构建了代码。
覆盖项目node_modules下的代码并再次运行开发服务器，即可直接调试组件的源代码。
有了sourcemap，Chrome DevTools就会直接列出sources中的vue文件，我们可以找到对应的vue文件进行断点，这样我们就不需要通过storm断点来查找了。
能够调试Element UI的源码后，如果想知道组件内部是什么逻辑，可以直接在源码断点处调试，非常香。
读两件事
如果你觉得这篇内容对你很有启发，我想邀请你帮我两个小忙：
点击“在看”，让更多人看到此内容（不管你喜不喜欢，都是流氓行为-_-）
关注公众号“Vue社区”，每周重点突破一个后端笔试难点。
在公众号后台回复“电子书”即可免费获得27本精选后台电子书！
点击观看支持我，转发更好
