debug一下，你就学会高效阅读开源项目代码～

文章首发：https://juejin.cn/post/6988528883540688926

前言

相信很多人在业余时间都会去 Github 上看一些比较优秀的开源项目，通过学习这些项目的源码来提升自己，但是优秀的开源项目大部分都具有 流程复杂 和 代码量大 两大特点，如果没有一定的技巧，相信很多开发者会和笔者初期一样，在代码的海洋里迷失自己～

先上结论：看代码最高效的方法是边调试边记录边看。

由于不同的人具有不同的记录习惯，本文不会讨论这个话题。

调试是看源码的银弹

我们看源码时，通常会遇到以下的问题：

• 文件太多，在各个文件之间来回看代码导致混乱
• 代码分支太多，没有数据仅凭记忆和想象难以判断当前代码执行的分支
• 无法判断某个方法返回的结果，必须要查看方法源码才能有基本判断，导致需要消化大量代码才能了解流程
• …

调试使我们更快了解整体流程

通过给定输入进行调试，我们可以轻松得知每一步执行返回的结果，而不需要关注方法内部的实现，这使得我们只需要关注少部分文件即可以了解代码整体执行流程。

调试使我们可以只关注局部实现

如果我们想了解某个方法的内部实现，可以直接在方法内部进行断点调试：通过给定数据进行输入并开始调试，编辑器会自动定位到断点位置，然后通过单步调试不断跟踪方法体每一行代码，知晓每一步代码执行的结果。

如何调试

由于笔者平时的开发编辑器是 VS Code，因此下文将主要描述在 VS Code 下的一些调试操作。

VS Code 已经集成了浏览器、Node.js 和 TypeScript 调试的能力，详细操作可以查看官方文档链接：browser-debugging、nodejs-debugging、typescript-debugging。

接下来将以一些具体例子来带大家领略下调试的魅力。

vscode调试预备知识

VS Code 进行前端调试非常简单，主要需要以下四个步骤：

• 选中编辑器中的调试（如上图步骤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"