![vscode でコードをデバッグする方法](/static/imghw/default1.png)
最初に拡張デバッグ プラグインをインストールしますdebugger for chrome
![1576142961636418.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
Ladybug ボタンをクリックしてデバッグしますプロジェクトの構成で、構成ボタンをクリックします。
![1576142991906802.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
#Chrome 環境を選択します
![1576143040288784.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
##Chrome デバッグ構成ファイル launch.json が表示されます。ポップアップが表示され、変更します。 ポートは
![1576143058480690.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
#lauch.json 構成ファイルが生成されていない場合は、次の方法で構成ファイルを開くこともできます。 [構成の追加] を選択します。
![1576143075248142.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
次に、[Chrome] を選択します。ポートを起動して変更します。
![1576143092680598.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
プロジェクトを開き、ctrl ` [ を使用します。 ` が Tab キー上にあることに注意してください] ngserve と入力してプロジェクトを開始します
![1576143109852501.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
とてんとう虫インターフェイスに切り替えます。たとえば、app.component にブレークを設定します。 .ts
![1576143130494377.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
をクリックしてデバッグ ボタンを開始すると、ブラウザ ページが自動的にポップアップ表示されます。
![1576143207513690.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
ページにアクセスすると、プログラムが実行されていることがわかります。
![1576143227526306.png vscode でコードをデバッグする方法](/static/imghw/default1.png)
# ブレークポイントの場所で、変数を表示したり、例外をキャプチャしたり、コール スタックやその他のデバッグを行うことができます。
おすすめの関連記事とチュートリアル:
vscode チュートリアル
以上がvscode でコードをデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。