還不會Vue2.x原始碼本地除錯!

語言: CN / TW / HK

theme: fancy

一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第2天,點選檢視活動詳情

一、前言

由於自己最近準備學習vue的原始碼,所以首先我得知道怎麼樣去本地除錯vue得原始碼。後續也會把學習中遇到得問題、校驗梳理成文章,也當作自己的學習筆記。

寫在前面,我看的版本是"version": "2.6.14"

二、如何進行本地除錯

  • 首先我們找到vue2的原始碼地址進行本地clone
  • 然後安裝依賴我使用的是yarn,可能你安裝的過程中會報錯,然後我使用了vpn安裝成功;接著yarn dev跑起專案。

image.png

這個時候vue的原始碼啟動了,你可以進行程式碼的除錯了。

image.png

examples資料夾下有一些官方給的例子,你也可以新建自己的檔案去調式程式碼。

首先我們看官方的這個例子vue\examples\commits\index.html,我們修改一下vue檔案引入: image.png

瀏覽器開啟它(如果你使用的是vscode安裝外掛open in browser,右鍵在瀏覽器開啟)。

這時候你可以在原始碼中debugger程式碼 image.png image.png

如果你覺得這樣除錯有點不方便,你想直接在瀏覽器上面打斷點進行除錯的話,我們需要在指令碼命令新增--sourcemap,如圖所示,然後重新啟動一下yarn devimage.png

這時候重新整理瀏覽器頁面,F12可以看到sources下可以看到vue的程式碼了,如果你就可以在你想要除錯的地方打斷點除錯了:

image.png

現在我們已經知道怎麼去除錯程式碼了,下一步就是閱讀原始碼去學習了;學習原始碼是一件枯燥甚至會感覺煩躁的過程,希望都可以靜下心來耐心學習,當你習慣之後一定有不少的提升~