我是怎么調(diào)試 Element UI 源碼的
??上篇文章??寫(xiě)了怎么調(diào)試 antd 的源碼，反響很不錯(cuò)：
但很多小伙伴是寫(xiě) Vue 的，可能平時(shí)用的是 Element UI 的組件庫(kù)，所以這篇文章就來(lái)講下怎么調(diào)試 Element UI 的源碼。
首先，我們用 Vue CLI 創(chuàng)建一個(gè) vue2 的項(xiàng)目：
創(chuàng)建成功后，進(jìn)入到項(xiàng)目目錄
安裝 element ui 的庫(kù)，并在入口引入：
然后在 App.vue 里用一下 button 組件
之后 yarn run serve 把開(kāi)發(fā)服務(wù)跑起來(lái)，就可以看到這樣的頁(yè)面：
Element UI 的組件正確的顯示了。
接下來(lái)調(diào)試 button 組件的源碼，那問(wèn)題來(lái)了，我怎么知道在哪里打斷點(diǎn)呢？
我們可以知道的是，這個(gè) button 會(huì)處理點(diǎn)擊事件，但是卻不知道事件處理函數(shù)的代碼在什么地方。
這種情況可以加一個(gè)事件斷點(diǎn)：
在 sources 面板的 Event Listener Breakponts 里勾選 Mouse 的 click 事件，也就是在所有 click 事件的處理函數(shù)處斷住。
然后你再點(diǎn)下那個(gè)按鈕試試看：
你會(huì)發(fā)現(xiàn)它在事件處理函數(shù)處斷住了。
當(dāng)你知道這個(gè)組件處理了什么事件，但卻不知道事件處理函數(shù)在哪的時(shí)候就可以用事件斷點(diǎn)。
當(dāng)然，這個(gè)事件處理函數(shù)并不是組件里的，因?yàn)?Vue 內(nèi)部會(huì)先做一些處理，然后再交給組件處理。
所以，我們要先走到組件的事件處理函數(shù)：
單步執(zhí)行、再進(jìn)入函數(shù)內(nèi)部，再單步執(zhí)行、再進(jìn)入函數(shù)內(nèi)部，代碼就會(huì)走到組件的事件處理函數(shù)：
methods、computed、props，這明顯是源碼里的了。但你再往上走兩步，會(huì)發(fā)現(xiàn)又不是最初的源碼：
template 變成了 render 函數(shù)，而且還有其他組件的代碼，這明顯是被編譯打包之后的代碼。
從文件名也可以看出來(lái)：
這是一個(gè)把所有組件代碼編譯后打包到一起的文件。
這樣雖然也能調(diào)試，但肯定是不爽的，能不能直接調(diào)試組件最初的源碼呢？就是帶 template 的單文件組件那種？
是可以的，這就要用到 sourcemap 了。
sourcemap 是在編譯過(guò)程中產(chǎn)生的：
里面記錄了目標(biāo)代碼和源代碼的映射關(guān)系，調(diào)試的時(shí)候可以通過(guò)它映射回源碼：
但是你去 node_modules 下看看，會(huì)發(fā)現(xiàn)沒(méi)有這個(gè)文件的 sourcemap：
那怎么生成它的 sourcemap 呢？
這就要從源碼重新編譯了。
我們從 github 把它的源碼下載下來(lái)：
--depth=1 是只下載單個(gè) commit，--single-branch 是下載單個(gè) branch，這樣下載速度能快幾十倍，是一個(gè)加速小技巧。
進(jìn)入 element 目錄，安裝依賴(lài)，你會(huì)遇到一個(gè)前端經(jīng)常頭疼的問(wèn)題，node-sass 安裝報(bào)錯(cuò)了：
這個(gè)問(wèn)題的解決方案就是把 node 版本切換到 node-sass 版本對(duì)應(yīng)的那個(gè)。
package.json 中可以看到 node-sass 是 4.11.0
打開(kāi) node-sass 的 github 首頁(yè)：
你會(huì)看到這樣一個(gè)版本對(duì)應(yīng)關(guān)系表：
4.11 對(duì)應(yīng) node11，那就把 node 切換到 11 就可以了。
然后再次 yarn 安裝依賴(lài)就能成功了。
之后開(kāi)始編譯，在 npm scripts 中可以找到 dist 命令，這就是構(gòu)建源碼用的：
但是我們只需要 element-ui.common.js 這個(gè)文件：
其實(shí)只需要執(zhí)行其中的一部分腳本，也就是這個(gè)：
所以在項(xiàng)目下執(zhí)行 npx webpack --config build/webpack.common.js 即可：
然后在 lib 下就可以看到構(gòu)建產(chǎn)物：
但我們的目標(biāo)是生成帶有 source-map 的代碼，所以要改下配置：
修改 build/webpack.common.js，配置 devtool 為 cheap-module-source-map：
source-map 是生成 sourcemap 并關(guān)聯(lián)，也就是這樣：
module 是把中間 loader 產(chǎn)生的 sourcemap 也給合并到最終的 sourcemap 里，這樣才能直接映射到源碼。
cheap 是加快編譯速度用的，只保留行的映射信息。
改完配置后再次 yarn run dist，就可以看到帶有 sourcemap 的產(chǎn)物了：
把這倆文件復(fù)制到測(cè)試項(xiàng)目的 node_modules/element-ui 下覆蓋下之前的：
之后清掉 node_modules/.cache 下的緩存，重新跑 dev server：
這時(shí)會(huì)報(bào)錯(cuò)提示你 node 版本太低了，你需要再把 node 版本換回來(lái)：
跑起開(kāi)發(fā)服務(wù)之后，再次用之前的方式調(diào)試 button 組件的源碼：
你會(huì)發(fā)現(xiàn)現(xiàn)在的組件代碼是帶 template 語(yǔ)法的單文件組件的代碼了！
這就是 sourcemap 的作用。
之后你會(huì)可以在這個(gè)組件里打斷點(diǎn)然后調(diào)試。
有的同學(xué)可能會(huì)問(wèn)，通過(guò)事件斷點(diǎn)進(jìn)入組件內(nèi)部，這樣有點(diǎn)麻煩，有沒(méi)有更簡(jiǎn)單的方式？而且 button 組件有點(diǎn)擊事件，但有的組件沒(méi)有呀，這些組件該怎么調(diào)試呢？
確實(shí)，有了 sourcemap 之后就有更簡(jiǎn)單的調(diào)試方式了。
你可以在 sources 左邊看到 ELEMENT 目錄下有很多 vue 文件，這其實(shí)就是 Chrome DevTools 解析 sourcemap 之后列在這里的：
你可以直接在里面打斷點(diǎn)調(diào)試。
比如我們加一個(gè) tabs 組件：
把前面添加的那個(gè)事件斷點(diǎn)去掉，在代碼里手動(dòng)打一個(gè)斷點(diǎn)：
然后你就會(huì)發(fā)現(xiàn)，這樣就可以調(diào)試 Element UI 組件源碼了！
當(dāng)然，有的組件找不到的時(shí)候，還是可以通過(guò)事件斷點(diǎn)的方式來(lái)進(jìn)入組件內(nèi)部。
我們是通過(guò) Chrome DevTools 調(diào)試的，其實(shí)用 VSCode Debugger 來(lái)調(diào)試它也是一樣的，在 Chrome DevTools 里打的斷點(diǎn)，在 VSCode Debugger 里同樣會(huì)斷住。
總結(jié)
今天我們調(diào)試了 Element UI 的源碼。
定位到組件的代碼，是通過(guò)事件斷點(diǎn)的方式，因?yàn)槲覀冎浪|發(fā)了什么事件，但卻不知道事件處理函數(shù)在哪。
但是組件的代碼是被編譯打包過(guò)的，不是最初的源碼。
為了調(diào)試最初的源碼，我們下載了 Element UI 的代碼，build 出了一份帶有 sourcemap 的代碼。
覆蓋項(xiàng)目 node_modules 下的代碼，重新跑 dev server，這時(shí)候就可以直接調(diào)試組件源碼了。
有了 sourcemap 之后，Chrome DevTools 會(huì)直接把 vue 文件列在 sources 里，我們可以找到對(duì)應(yīng)的 vue 文件來(lái)打斷點(diǎn)，就不用通過(guò)事件斷點(diǎn)來(lái)找了。
能夠調(diào)試 Element UI 源碼之后，想知道組件內(nèi)部都有哪些邏輯的話(huà)，就可以直接在源碼斷點(diǎn)調(diào)試了，就很香。
