使用 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 源碼。

~

~本文完,感謝閱讀!

~

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

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章