第一篇：https://juejin.cn/post/698852...相信很多人都会去Github看一些优秀的业余时间开源项目。通过学习这些项目的源码来提升自己，但是优秀的开源项目大多具有过程复杂、代码量大的特点。如果没有一定的技巧，相信很多开发者在早期都会像笔者一样迷失自我~先得出结论：看代码最高效的方法就是边看边调试和记录。由于不同的人有不同的录音习惯，本文不讨论这个话题。调试是看源码的灵丹妙药我们在看源码的时候，通常会遇到以下问题：文件太多，在每个文件之间来回看代码导致混乱代码分支太多，没有数据,仅凭记忆和想象很难判断当前代码执行的分支无法判断某个方法返回的结果。必须查看方法的源码才能做出基本的判断，导致需要消化大量的代码才能理解流程...调试可以让我们更快的了解整体流程，给定输入进行调试，我们可以无需关注方法内部的实现，就可以轻松知道每一步执行返回的结果，这使得我们只需要关注少量的文件就可以了解代码的整体执行过程。调试让我们只关注本地实现。如果我们想了解一个方法的内部实现，我们可以直接在方法内部进行断点调试：输入给定的数据并开始调试，编辑器会自动定位断点位置，然后持续跟踪方法中的每一行代码body通过单步调试，知道每一步代码执行的结果。如何调试由于笔者常用的开发编辑器是VSCode，下面将主要介绍VSCode下的一些调试操作。VSCode集成了浏览器、Node.js和TypeScript调试功能。详细操作参考官方文档链接：browser-debugging、nodejs-debugging、typescript-debugging。下面将通过一些具体的例子来向大家展示调试的魅力。vscode调试入门知识VSCode进行前端调试非常简单。主要需要以下四步：在编辑器中选择debug（如上文第1步），创建launch.json文件（如上文第2步）。完成这一步后，会在源码根目录下创建.vscode/launch.json，并配置launch.json，开始调试launch.json配置介绍上图操作创建的launch.json如下:{//使用IntelliSense了解相关属性。//悬停以查看现有属性的描述。//有关更多信息，请访问：https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"Launcher","skipFiles":["/**"],"program":"${file}"}]}我们只需要关注其中的每一个配置configurations：type：调试器类型，这里表示使用node来执行程序request：表示如何启动调试器，有两个值attach和launchattach：如果node程序已经启动，则将调试器附加到已经启动的中启动的程序launch：使用调试器直接启动程序，开始调试name：配置的名称skipFiles：调试忽略的文件，配置后，单步调试不会进入匹配的文件以上配置项，笔者认为还有几个配置项值得大家关注：runtimeExecutable:st使用什么命令art调试，比如上面的配置默认使用node来执行程序文件。args：启动控制台时的参数：建议设置为integratedTerminal，这样调试过程的信息会显示在VSCode内置终端中restart：设置为true时，调试完成后会自动重启修改代码并保存stopOnEntry：调试器启动后，是否在第一行代码暂停，很方便A配置端口：调试使用的端口cwd：调试器的根目录...更多参数请参考到官方文档：nodejs-debugging#_launch-configuration-attributesdebugging#_launchjson-attributeslaunch.json里面还包含一些具体的模板变量，比如上面程序属性${file}的值，这里也罗列一下含义每个模板变量：${workspaceFolder}:VS在Code中打开的文件夹目录（通常是项目的位置）${workspaceFolderBasename}：在VSCode中打开的文件夹目录，没有任何斜杠（/）${file}：当前打开文件的绝对位置${relativeFile}：当前打开的文件相对于工作空间文件夹的相对位置${fileBasename}:当前打开的文件的文件名（带扩展名，如test.js）${fileBasenameNoExtension}:当前打开的文件的文件名，带extension（不带扩展名，如test）${cwd}：当前执行目录${fileDirname}：当前打开文件的目录位置${fileExtname}：当前打开文件的扩展名${lineNumber}：thenumberoflinescurrentlyselectedinthefile${selectedText}:文件中当前选中的内容属于上述。上面的launch.json配置为使用node调试当前打开的文件。假设当前打开了a.js并设置了断点，开始调试如下图：Vue3源码调试接下来以Vue3代码为例进行调试演示首先复制Vue3代码，进入项目目录：gitclonehttps://github.com/vuejs/vue-next.gitcdvue-next可以发现Vue3项目已经进行了调试配置：{"version":"0.2.0","configurations":[{"name":"Jest","type":"node","request":"launch","program":"${workspaceFolder}/node_modules/.bin/jest","stopOnEntry":false,"args":["${fileBasename}","--runInBand","--detectOpenHandles"],"cwd":"${workspaceFolder}","preLaunchTask":null,"runtimeExecutable":null,"runtimeArgs":["--nolazy"],"env":{"NODE_ENV":"development"},"console":"integratedTerminal","sourceMaps":true,"windows":{"program":"${workspaceFolder}/node_modules/jest/bin/jest",}}]}虽然这个配置的类型是node，但是runtimeExecutable是null，所以不会使用默认的node来执行文件。相反，program中的可执行程序jest用于执行该文件。执行文件是什么？答案是args中的${fileBasename}，也就是当前打开的文件。因此，当我们打开一个*.spec.ts文件时，我们就可以在这个文件中进行调试。Vue3主进程调试自带的jest调试只能调试本地方法。需要了解Vue3执行的主流程怎么办？打开packages目录，一定能看到vue目录，其目录结构如下：├──__tests__│├──Transition.spec.ts│├──TransitionGroup.spec.ts│├──e2eUtils.ts│├──index.spec.ts│├──runtimeCompilerOptions.spec.ts│├──svgNamespace.spec.ts│└──transition.html├──api-extractor.json├──examples│├──__tests__││├──commits.mock.ts││├──commits.spec.ts││├──grid.spec.ts│├──markdown.spec.ts││├──svg.spec.ts││├──todomvc.spec.ts││└──tree.spec.ts│├──经典│├──commits.html││├──grid.html││├──markdown.html││├──svg.html││├──todomvc.html││└──tree.html│├──composition││├──commits.html││├──grid.html││├──markdown.html││├──svg.html│├──todomvc.html││└──tree.html│└──transition│├──list.html│└──modal.html├──索引。js├──node_modules├──package.json└──src├──dev.ts├──index.ts└──*.htmlinruntime.tsexamples是Vue3各个特性的示例代码。通过调试这些文件，我们可以了解Vue3的整体执行流程。这些html文件都引入了一个../../dist/vue.global.js文件，我们先通过命令构建，回到项目根目录执行：yarndev--sourcemap然后，安装DebuggerfromVSCode中的Chrome扩展：添加launch.json配置：{"type":"chrome","request":"launch","name":"LaunchChrome","url":"http://localhost:8080","webRoot":"${workspaceFolder}","file":"${workspaceFolder}/packages/vue/examples/composition/${fileBasename}"}这个配置可以让我们调试packages下的所有*.html文件/vue/examples/composition/和debug其他目录下的文件可以通过修改文件的路径来实现。接下来我们测试调试配置是否有效，在packages/vue/examples/composition/commit.html中设置断点，在packages/compiler-core/src/compile.ts中的baseCompile函数中设置断点，执行调试:可以看到程序暂停在debugger代码处，通过stepover进入createApp（位于packages/runtime-dom/src/index.ts），然后通过F5进入下一个断点，即packages/compiler-在核心/src/compile.ts中。大功告成，尽情阅读Vue3源码~ts-node调试TypeScriptTypeScript的流行程度不用多说，这里简单介绍一下直接在*.ts文件中调试的技巧：使用ts-node来执行程序，配置如下：{"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"LaunchTS","runtimeArgs":["-r","ts-node/register"],"args":["${workspaceFolder}/test.ts"]},]}总结调试不仅是我们排查问题的重要手段，也是我们高效查看项目源码的一种方式。本文介绍查看源码调试的优势和VSCode调试的相关知识。由于篇幅有限以及笔者自身见识有限，其中还有很多知识点需要读者自行探索。在评论区指出。原创不易，希望大家喜欢~~~
