tsserverをデバッグする #Node.js

TypeScriptリポジトリのwiki にVSCodeを利用したデバッグ方法が記載されていたのですが、tsserver自体のデバッグだけだったらもっと簡単に出来るのでメモ

tl;dr

単にnodeのデバッグを普通にVSCodeなりchromeのinspectorなりでやるだけです

手順

TypeScriptのリポジトリを取得
ビルドを実施
tsserver.jsをnodeから --inspect フラグ付きで実行
tsserverのプロセスにデバッガからアタッチする
tsserverのプロセスに任意のコマンドを投げつけて適当にデバッグする

TypeScriptのリポジトリを取得

普通にcloneしましょう
https://github.com/microsoft/TypeScript.git

ビルドを実施

普通にビルドしましょう。至って普通です

npm install
npm run build

ビルド結果は built/local に吐き出されます

tsserver.jsをnodeから `--inspect` フラグ付きで実行

tsserver.jsをnodeで実行します。
--inspectフラグを付けることでデバッガからアタッチ可能になります

node --inspect ./built/local/tsserver.js

すると↓のような出力が出ます

node --inspect ./built/local/tsserver.js

Debugger listening on ws://127.0.0.1:9229/c93e7eb4-5101-4937-bdc8-4a79d9d381f7
For help, see: https://nodejs.org/en/docs/inspector
Content-Length: 75

{"seq":0,"type":"event","event":"typingsInstallerPid","body":{"pid":4278}}
Debugger listening on ws://127.0.0.1:9230/ae4929aa-bae7-4c28-8e6f-144c1cbef644
For help, see: https://nodejs.org/en/docs/inspector

portはデフォルトが 9229 ですが、どうもtsserverはプロセスが2つ立ち上がるのでデバッグしたい箇所によってはどちらのポートにアタッチするかちゃんと選ぶ必要がありそうです（自分は最初に出力されたほうで間に合ったので特に調べてません。。）

tsserverのプロセスにデバッガからアタッチする

任意のデバッガでtsserverのプロセスにアタッチしましょう。これでデバッグが出来るようになります

VSCodeの例

以下のように launch.json を作成して、デバッグコンソールからデバッグを開始すればOKです
アタッチに成功するとtsserverのプロセスで Debugger attached.と出力されます

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to TS Server",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "port": 9229,
      "sourceMaps": true,
      "outFiles": ["/path/to/TypeScript/built/local"],
    },
  ]
}

portについてはここでは 9229にしてありますが、先述の通りデバッグ箇所によって適切に変更する必要があるかもです
ソースマップの解決のために outFiles を適切に設定して上げる必要があります

詳しくはVSCodeのドキュメントのnode.jsのデバッグ方法のページを見てください

chromeの例

chrome://inspectを開き、 configureボタンからデバッグしたいURLを入力します
- 127.0.0.1:9229 など
Remote Targetの項目にデバッグ対象のプロセスが現れるので inspect を押します
インスペクタの Sourcesを開き、左ペインの +Add folder to workspace をクリックし、TypeScriptのリポジトリを選択します
いい感じにソースマップを解決してくれるので、適当にtsファイルをデバッグします

＊chromeの方は使ってないのでちゃんと調べてないです（エディタでデバッグするほうが定義ジャンプとかする関係で楽なので。。）

tsserverのプロセスに任意のコマンドを投げつけて適当にデバッグする

tsserverは標準入力でコマンドを受け付けるようになっているので、↓のようにデバッグしたいコマンドを貼り付けて実行してやれば処理が開始されます
サーバーのデバッグのためにHTTPリクエスト投げつけるぐらいのノリですね

{"command":"open","arguments":{"file":"/path/to/sample.ts"}}

実際のコマンドをどうやって探すかという話については、VSCodeのコマンドパレットから Open TS Server logと叩いてやってエディタが得ているログを見れば、↑のようなjsonがそのまま転がっているのでそれを利用すればOKです

おわり

以上、tsserverをデバッグする方法でした

tsserverをデバッグする