VSCode に インストール済みの拡張機能をデバッグする

はじめに

VS Code の拡張機能がなんかおかしい、うまく動いていないといったときにデバッグする方法のメモ

基本的には↓のスレッドに記載のとおり。

試した環境は以下の通り

Windows PC で WSL2 上で VS Code が動作している

この VS Code の 拡張機能を、Windows 上の Edge の DevTools でデバッグ

devcontainer は未検証

手順

extension host の プロセスを特定する

VS Code の拡張機能は、extension-host というプロセスで動いているそうです。

そのプロセスの PID を探します。

PID=$(pgrep -f ".*--type=extensionHost")
echo $PID
132242

ps 132242
    PID TTY      STAT   TIME COMMAND
 132242 pts/5    Rl+    4:27 /home/toshida/.vscode-server/bin/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/node --dns-result-order=ipv4first /home/toshida/.vscode-server/bin/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/out/bootstrap-fork --type=extensionHost --transformURIs --useHostProxy=true

inspector を有効にする

Node.js の仕組みで、SIGUSR1 シグナルを送ると、そのプロセスで inspector が起動できるそうです。

kill -SIGUSR1 $PID

このコマンドでは、該当のプロセスは動きつづけたままとなり、停止や再起動されるわけではありません。

inspector の listen ポートを特定する

inspector が listen してるポートを探します。

$ lsof -p $PID  -a -i4tcp

こんな感じで、SIGUSR1 シグナル送信後には、LISTEN が増えているはずです。

DevTools(Chrome / Edge) から接続する

edge://inspect/#devices からリモート接続をします。

inspect のリンクで別ウィンドウが開きます。

Debug する

ワークスペースに、実際の拡張機能のコードがあるフォルダを追加して、アクセスを許可します。

目的の拡張機能のファイルを探します。
Azure 系だと、代替 dist/extension.bundle.js になると思います。

デフォルトでは bundle.js は無視リストに入っているのでデバッガが止まりませんので、解除します。

あとはブレークポイントを追加したりは、普通の使い方です。

ブレークポイントの使い方については、↓でも少し書いてた

Happy Hacking!