相信很多同學都已經上手 Vue3 了，用起來是真香！
學習技術又怎能不學習原始碼，多看看原始碼，說不定自己哪天也成大佬了呢 ︿(￣︶￣)︿
今天，我來記錄一下自己除錯 Vue3 原始碼的過程，方便以後參考。
準備工作
首先需要下載原始碼和安裝依賴：
mkdir code
git clone https://github.com/vuejs/vue-next.git
cd ./vue-next
yarn install執行完上面這一套之後，得到如下檔案結構：
貼心小提示：由於國內訪問 Github 實在龜速，所以我一般都是將 Github 上的專案匯入到 Gitee，然後從 Gitee 上克隆的，速度賊快！
基本除錯
在 vue-next 目錄下，使用終端執行 yarn run dev，得到如下輸出：
使用 VSCode 的 Live Server 外掛執行 packages/vue/examples/composition/grid.html，然後開啟控制檯檢視程式碼，結果是：
所有的程式碼都被合到 vue.global.js 中了，除錯程式碼時，走的都是這個檔案中的程式碼，那如果想要除錯 Vue3 的 TypeScript 原始碼的話，要怎麼做呢？
除錯 TypeScript 原始碼
首先，在 vue-next/package.json 的指令碼指令中新增 -s 或者 -sourcemap：
然後執行”開發除錯“中的步驟，得到的結果如下：
可以看到，此時，我們可以透過斷點進入到 Vue3 的 TS 原始碼中了，也代表著我們在除錯 Vue3 原始碼。
總結
透過上面的操作可以看到，如果我們在構建 Vue3 時增加 -sourcemap 引數，那得到的結果可以讓我們在 Chrome 瀏覽器中直接除錯 TS 原始碼。
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
本作品採用《CC 協議》，轉載必須註明作者和本文連結