8

OptionAtom では、開発者ツール ( + Cmd+ I) を開いて JavaScript ファイルを参照することで~/.atom/packages、インストールされている拡張機能をデバッグできます。

Atom 開発者ツール

VSCodeでこれを行うことは可能ですか? Help -> Toggle Developer Toolsで開発者ツールを開いた後、私が見つけることができる唯一の拡張機能関連のファイルはアイコン画像です:

VSCode 開発者ツール

4

4 に答える 4

8

1.拡張ホストプロセスの PIDを見つけます。

$ PID=$(pgrep -f "^/Applications/Visual Studio Code\.app/.*--type=extensionHost")
$ echo $PID
35791

引数は、プロセス名だけでなく、完全なプロセス引数文字列に対してパターンを照合するように-f指示します。pgrep

2. 拡張ホスト ノード プロセスに SIGUSR1 を送信して、デバッガー接続のリッスンを開始するように指示します。

$ kill -SIGUSR1 $PID

(これは出力を生成しません。)

3. 以下を使用して、プロセスがリッスンを開始したポートを見つけますlsof。

$ lsof -p $PID -a -i4tcp
COMMAND     PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Code\x20H 35791 tim.vergenz   58u  IPv4 0x8af67df8a9aa26a8      0t0  TCP localhost:63767 (LISTEN)

引数の説明:

  • -pPIDによるフィルターを意味します
  • -i4tcpインターネットアドレスによるフィルターを意味します（4tcpIPv4 / tcpプロトコルのみを意味します）
  • その-a中間は、デフォルトの OR の代わりに AND を介して 2 つのフィルターを結合します。

「NAME」列には、VS Code 拡張ホスト プロセスがリッスンしているホストとポートが表示されます。つまり、上記の例ではlocalhost:63767.

4. Chrome Devtools を開き、[デバイス] > [ネットワーク ターゲットの検出] > [構成] の下にデバッグ アドレスを追加します。

Chrome Devtools @ chrome://inspect

手順 3 からデバッガー アドレスを追加します。

5. 新しいデバッグ ターゲットを開きます。

新しいデバッグ ターゲットに接続する

~/.vscode/extensionsファイルを参照してブレークポイントを追加するには、手動でワークスペースに追加する必要がある場合があります。

フォルダをワークスペースに追加

...そして「許可」をクリックして許可を与えます：

devtools が ~/.vscode/extensions にアクセスできるようにする

成功！

成功！ VS Code 拡張機能が devtools に表示されるようになりました

于 2021-04-14T21:12:04.900 に答える
2
于 2020-01-31T17:10:48.547 に答える
0

VS Code がデバッグ UI とデバッグ プロトコルを実装する方法が原因で、それは不可能です (ただし、これについて 100% 確信があるわけではありません)。

デバッグ アダプターは、VS Code の拡張可能なアーキテクチャの一部です。拡張機能として提供されます。それらを他の拡張機能と区別するのは、デバッグ アダプター コードが拡張機能ホストではなく、独立したスタンドアロン プログラムとして実行されるという事実です。

デバッガーの考えの下で拡張機能を簡単に実行できます。拡張機能のソース ファイルとデバッガーの起動構成が必要です。

拡張機能の実行とデバッグの詳細については、VS Code のドキュメントを参照してください。

起動構成の拡張ワードカウントの例を確認することもできます。

于 2016-08-18T10:07:22.577 に答える