[Node] 淡如止水 TypeScript (一):准备调试

0. 背景

所谓 “工欲善其事,必先利其器”,读源码确实是一件烧脑的事情,
但如果我们能跟踪代码的执行过程,难度就会降低很多。

给我们一个调试器,我们几乎可以研究任何复杂项目的实现原理。
因此,下文我们先准备调试环境,打算使用了 VSCode 对 TypeScript 源码进行调试。

为此,我们从克隆源码仓库开始,然后详细的介绍 TypeScript 的调试过程。

1. 克隆

$ git clone https://github.com/microsoft/TypeScript.git
$ cd TypeScript
$ git checkout v3.7.3

2. 构建

$ npm i
$ node node_modules/.bin/gulp LKG

其中,gulp LKG,会将 src/ 中的源码编译到 built/local/ 文件夹中,
详细解释可以参考这里,lib/README.md

3. 调试

3.1 修改 bin/tsc

TypeScript 源码中 bin/tscrequire 的是 lib/tsc.js
lib/ 中的代码是没有 source map 的,
我们要将这里改成 require 上一步 gulp 构建出来的 built/local/tsc.js

#!/usr/bin/env node
require('../built/local/tsc.js');

3.2 调试配置

VSCode 菜单 -> Debug -> Add Configuration -> Node.js

VSCode 会新建 .vscode/launch.json 文件,我们写入如下内容,

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug"
      ],
      "port": 9001,
      "skipFiles": [
        "<node_internals>/**"
      ],
      "stopOnEntry": true,
    }
  ]
}

(1)name 字段名字可以任取,是展示在调试面板中的名字。

(2)runtimeArgs 数组的第二个元素,对应 VSCode 要调用 npm scripts 名字,一会我们要修改 package.json 文件,添加一个名为 debug 的 scripts。
(3)port 表示调试端口,要与 debug scripts 指定的端口号保持一致。

(4)stopOnEntry 断点自动停在,调试启动后执行的第一行代码那里。

3.3 debug scripts

打开 package.json,添加一个名为 debug 的 scripts,

{
  ...
  "scripts": {
    "debug": "node --inspect-brk=9001 bin/tsc debug/index.ts",
    ...
  },
  ...
}

(1)npm scripts 名字必须为 debug,保持与 .vscode/launch.json 中的 runtimeArgs 数组第二元素一致。
(2)--inspect-brk=9001 表示调试端口号,保持与 .vscode/launch.json 中的 port 字段一致。

(3)debug/index.tstsc 编译的 .ts 文件,我们需要新建一个 debug 目录,然后添加一个 index.ts 文件。

debug/index.ts 的内容如下,

const i: number = 1;

3.4 启动调试

使用 VSCode 打开 TypeScript 源码仓库的根目录,然后按 F5 启动调试。

我们看到断点自动停在了 bin/tsc 第一行了,这正是 stopOnEntry 的作用。


总结

以上每一节的介绍,稍微有些分散,现在这里总结一下,为了查阅方便。

(1)克隆仓库、安装依赖、执行构建

$ git clone https://github.com/microsoft/TypeScript.git
$ cd TypeScript
$ git checkout v3.7.3
$ npm i
$ node node_modules/.bin/gulp LKG

(2)修改 lib/tsc

#!/usr/bin/env node
require('../built/local/tsc.js');

(3)添加 .vscode/launch.json 调试配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug"
      ],
      "port": 9001,
      "skipFiles": [
        "<node_internals>/**"
      ],
      "stopOnEntry": true,
    }
  ]
}

(4)package.json 中添加 debug scripts

{
  ...
  "scripts": {
    "debug": "node --inspect-brk=9001 bin/tsc debug/index.ts",
    ...
  },
  ...
}

(5)添加待 tsc 编译的源码文件 debug/index.ts

const i: number = 1;

(6)VSCode 打开 TypeScript 仓库,按 F5 启动调试

参考

TypeScript v3.7.3
Debugging in Visual Studio Code

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容