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.
The hard way
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 vscodeCode 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 whereCode 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.