Vue3 源码解读之源码调试

540 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第16天,点击查看活动详情 >>

版本:3.2.31

想要学习vue3源码,首先需要知道如何调试vue3的源码。本文将介绍如何调试vue3源码。

1、下载源码

直接从GitHub上vue3的仓库获取,源码地址为:github.com/vuejs/core

需要注意的是,在GitHub上,vue3的源码在 core 目录下:

2、安装依赖

使用VsCode打开源码,当前下载的源码版本是 3.2.31:

在源码目录中,有个pnpm-lock.yaml 文件,该文件是用来管理依赖包的,在安装依赖时需要使用 pnpm install 命令安装,使用 npm 或 yarn 都会报错。

使用 npm install 命令报错:

使用 yarn 命令报错:

使用 pnpm install 命令成功安装:

3、启动 sourceMap

当我们执行 npm run dev 命令时,会执行 scripts/dev.js 文件,会在vue目录下生成dist文件夹。

我们来看看 scripts/dev.js 文件中 sourceMap 的配置:

启动 sourceMap

在 build 函数执行时,sourceMap 默认传入 true,即启动 sourceMap。在执行 npm run dev 命令时,会在vue目录下的dist文件夹生成 vue.global.js 和 vue.global.js.map 两个文件,表示已经开启了 sourceMap:

那么在调式时可以看到 packages 目录下的源码:

不启动sourceMap

如果在 build 函数执行时,sourceMap 传入 false,表示不启动 sourceMap,在执行 npm run dev 命令时,在vue目录下的dist文件夹只会生成 vue.global.js 文件:

在调式时无法看到 packages 目录下的源码:

4、调式源码

在启动了 sourceMap 之后,就可以调式源码了。

4.1 静态页面调试源码

在浏览器中直接打开 vue/examples 目录下的静态页面,在需要打断点的地方打上断点,即可对源码进行断点调试。如下图:

4.2 创建本地服务调试

利用 vscode 的 live server 插件,创建本地服务。

在 vscode 上安装 live server 插件成功后,在右下角有一个 Go Live 的提醒,点击它就能打开当前文件并放到它创建的服务器上了。

利用live server在浏览器上运行打开examples/composition/todomvc.html文件,在需要打断点的地方打上断点,即可对源码进行断点调试。如下图:

或者在需要打开的HTML页面右键,选择 Open with Live Server 命令,也可在浏览器中打开要调式的页面。如下图;

4.3 手动debugger

4.1 和 4.2 这两种方式都是在浏览器上打断点进行调试,除此之外,还可以在代码中直接写 debugger 进行源码调式。比如我们在 packages/runtime-dom/src/index.ts 文件的createApp 函数前面写上 debugger:

在浏览器运行HTML页面,就会马上进入debugger模式,直接定位到刚刚我们写有 debugger 的地方:

结语

至此,我们就可以愉快地调试vue3的源码了。