Setup guide

~~It costs me a whole day to setting up a usable development environment, Fuajbck~~

Prepare

Always start from builting the local TypeScript compiler.

Clone/Fork & Clone the TypeScript code base to local machine.
Run gulp local.
Good to go.

The easy way

Open a whatever dir says debug-ts-complier with file type relates to some features you want to experiment with TypeScript.
Create .vscode/launch.json file in TypeScript codebase, with setting like the following:

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/built/local/tsc.js",
  "args": [
      "/path/to/debug-ts-compiler/file.whatever.type",
      "--skipLibCheck",
      "--noLib"
  ],
  "sourceMaps": true,
  "protocol": "inspector"
}

Start debugging with breakpoints you want to experiment.

There are some shortcuts with this method, like no interaction with the compiler when typing or hovering etc.

Actually this method is easy as well, but the official document confuses me a lot (of course my english's bad) and I searched google with debug TypeScript compiler gives me unrelavant results, it cost me almost a day to figure it out.

Build a local copy of development version of vscode called Code OSS.
Setup the tsdk in.vscode/setting.json in the built version vscode Code OSS.

{
    "typescript.tsdk": "/path/to/TypeScript/built/local"
}

Setup environment variable TSS_DEBUG as a port. Code OSS instance will runs on this port when run the command ./scripts/code.sh in vscode codebase.

Run the following code in a terminal.

export TSS_DEBUG=5859

Select the TypeScript version to the above path by clicking right corner in Code OSS.
Add configuration below to .vsocode/launch.json in TypeScript codebase. It tells the vscode debugger in TypeScript codebase to attach to the port where Code OSS is running.

{
  "name": "Attach To Code OSS",
  "type": "node",
  "request": "attach",
  "outFiles": ["/path/to/TypeScript/built/local"],
  "sourceMaps": true,
  "port": 5859
},

There are some weird things happen when I try to use the official method below. The breakpoint in TypeScript codebase becomes gray with error Breakpoint ignored because generated code not found (source map problem?), and I can't figure out what is going wrong...

{
  "version": "0.2.0",
  "configurations": [
    // Other configs
    {
      "name": "Attach to TS Server",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "port": 5859,
      "sourceMaps": true,
      "outFiles": ["/path/to/repo/TypeScript/built/local"],
      "runtimeArgs": [
          "--inspect=5859"
      ]
    }
  ]
}

Debug with Attach To Code OSS and happy coding.

The debugger is activated but does not response to any action.

看看 5859 端口是否被别的程序监听（已知在别的项目中设置了 typescript.tsdk = "/path/to/TypeScript/built/local" 的同时打开该项目会导致这种情况）。
不知道，重启大法好，嘻嘻。

Useful tools

TypeScript AST Viewer -- Watch the ast structure with easy.

fuafa/debug-ts-compiler

Setup guide

Prepare

The easy way

The hard way

The debugger is activated but does not response to any action.

Useful tools

References