前言
在使用Vue开发项目的过程中，Element UI 无疑是一个不错的组件库选择，一些场景下，当我们需要对Element UI源码进行调试时，应该怎么做呢？本文就该问题向大家进行简单的介绍。
安装 element ui 的库，并在入口引入：
Element UI 组件源码调试
安装及引入
首先创建一个Vue项目，并在项目的main.js中引入并使用Element UI
然后在 App.vue 中简单使用一下 button 组件
之后 npm run serve 把开发服务跑起来，就可以看到这样的页面：
Element UI 的组件正确的显示了。
接下来调试 button 组件的源码，也就是在这里出现了问题，我们应该在哪里打断点呢？
事件断点
我们可以知道，Element UI中这个 button 会处理点击事件，但是却不知道事件处理函数的代码在什么地方。
这种情况可以加一个事件断点：
在 sources 面板的 Event Listener Breakponts 里勾选 Mouse 的 click 事件，也就是在所有 click 事件的处理函数处断住。
然后再点击按钮可以发现，它在事件处理函数处断住了：
当已知组件处理了什么事件，但却不知道事件处理函数在哪的时候就可以用事件断点。
当然，这个事件处理函数并不是组件里的，因为 Vue 内部会先做一些处理，然后再交给组件处理。
所以，我们要先走到组件的事件处理函数：
单步执行、再进入函数内部，再单步执行、再进入函数内部，代码就会走到组件的事件处理函数：
methods、computed、props，这明显是源码里的了。但你再往上走两步，会发现又不是最初的源码：
template 变成了 render 函数，而且还有其他组件的代码，这明显是被编译打包之后的代码。
从文件名也可以看出来：
这是一个把所有组件代码编译后打包到一起的文件。
这样调试起来非常的不直观，有没有什么方法可以直接调试组件最初的源码呢？就是带 template 的单文件组件那种？
在这种情况下，这就要用到 sourcemap 了。
sourcemap
sourcemap 是在编译过程中产生的：
里面记录了目标代码和源代码的映射关系，调试的时候可以通过它映射回源码：
但是去 node_modules 下查看时，会发现没有这个文件的 sourcemap：
那该如何生成它的 sourcemap 呢？
这就要从源码重新编译了。
我们从 github 把它的源码下载下来：
git clone --depth=1 --single-branch git@github.com:ElemeFE/element.git
之后开始编译，在 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 是把中间 loader 产生的 sourcemap 也给合并到最终的 sourcemap 里，这样才能直接映射到源码。
cheap 是加快编译速度用的，只保留行的映射信息。
改完配置后再次 npx webpack --config build/webpack.common.js，就可以看到带有 sourcemap 的产物了：
把这俩文件复制到测试项目的 node_modules/element-ui 下覆盖下之前的：
devtool 设置为 source-map:
之后清掉 node_modules/.cache 下的缓存，重新跑 dev server：
这时会报错提示你 node 版本太低了，你需要再把 node 版本换回来：
跑起开发服务之后，再次用之前的方式调试 button 组件的源码：
你会发现现在的组件代码是带 template 语法的单文件组件的代码了！
这就是 sourcemap 的作用。
之后你会可以在这个组件里打断点然后调试。
有的同学可能会问，通过事件断点进入组件内部，这样有点麻烦，有没有更简单的方式？而且 button 组件有点击事件，但有的组件没有呀，这些组件该怎么调试呢？
确实，有了 sourcemap 之后就有更简单的调试方式了。
你可以在 sources 左边看到 ELEMENT 目录下有很多 vue 文件，这其实就是 Chrome DevTools 解析 sourcemap 之后列在这里的：
你可以直接在里面打断点调试。
比如我们加一个 tabs 组件：
把前面添加的那个事件断点去掉，在代码里手动打一个断点：
然后就可以通过源码调试 Element UI 组件了。
当然，有的组件找不到的时候，还是可以通过事件断点的方式来进入组件内部。
我们是通过 Chrome DevTools 调试的，其实用 VSCode Debugger 来调试它也是一样的，在 Chrome DevTools 里打的断点，在 VSCode Debugger 里同样会断住。
该文章借鉴了这位大佬的文章
