使用 Chrome 除錯 Vue3 的 TypeScript 原始碼

程式設計三昧 發表於 2021-09-27
Vue Chrome

使用 Chrome 除錯 Vue3 的 TypeScript 原始碼

相信很多同學都已經上手 Vue3 了,用起來是真香!

學習技術又怎能不學習原始碼,多看看原始碼,說不定自己哪天也成大佬了呢 ︿( ̄︶ ̄)︿

今天,我來記錄一下自己除錯 Vue3 原始碼的過程,方便以後參考。

準備工作

首先需要下載原始碼和安裝依賴:

mkdir code
git clone https://github.com/vuejs/vue-next.git
cd ./vue-next
yarn install

執行完上面這一套之後,得到如下檔案結構:

image-20210927181106256

貼心小提示:由於國內訪問 Github 實在龜速,所以我一般都是將 Github 上的專案匯入到 Gitee,然後從 Gitee 上克隆的,速度賊快!

基本除錯

vue-next 目錄下,使用終端執行 yarn run dev,得到如下輸出:

image-20210927181630791

使用 VSCode 的 Live Server 外掛執行 packages/vue/examples/composition/grid.html,然後開啟控制檯檢視程式碼,結果是:

image-20210927193924649

所有的程式碼都被合到 vue.global.js 中了,除錯程式碼時,走的都是這個檔案中的程式碼,那如果想要除錯 Vue3 的 TypeScript 原始碼的話,要怎麼做呢?

除錯 TypeScript 原始碼

首先,在 vue-next/package.json 的指令碼指令中新增 -s 或者 -sourcemap:

image-20210927194536043

然後執行”開發除錯“中的步驟,得到的結果如下:

image-20210927194645408

可以看到,此時,我們可以通過斷點進入到 Vue3 的 TS 原始碼中了,也代表著我們在除錯 Vue3 原始碼。

總結

通過上面的操作可以看到,如果我們在構建 Vue3 時增加 -sourcemap 引數,那得到的結果可以讓我們在 Chrome 瀏覽器中直接除錯 TS 原始碼。

~

~本文完,感謝閱讀!

~

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

大家好,我是〖程式設計三昧〗的作者 隱逸王,我的公眾號是『程式設計三昧』,歡迎關注,希望大家多多指教!

你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以餘韻相贈!

知識與技能並重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!

本作品採用《CC 協議》,轉載必須註明作者和本文連結