![vscode でコードをデバッグする方法](https://img.php.cn/upload/article/000/000/041/5df2083d6c488612.jpg)
最初に拡張デバッグ プラグインをインストールしますdebugger for chrome
![1576142961636418.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/486/654/569/1576142961636418.png)
Ladybug ボタンをクリックしてデバッグしますプロジェクトの構成で、構成ボタンをクリックします。
![1576142991906802.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/137/729/623/1576142991906802.png)
#Chrome 環境を選択します
![1576143040288784.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/870/722/459/1576143040288784.png)
##Chrome デバッグ構成ファイル launch.json が表示されます。ポップアップが表示され、変更します。 ポートは
![1576143058480690.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/747/205/791/1576143058480690.png)
#lauch.json 構成ファイルが生成されていない場合は、次の方法で構成ファイルを開くこともできます。 [構成の追加] を選択します。
![1576143075248142.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/717/740/799/1576143075248142.png)
次に、[Chrome] を選択します。ポートを起動して変更します。
![1576143092680598.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/240/961/288/1576143092680598.png)
プロジェクトを開き、ctrl ` [ を使用します。 ` が Tab キー上にあることに注意してください] ngserve と入力してプロジェクトを開始します
![1576143109852501.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/934/532/464/1576143109852501.png)
とてんとう虫インターフェイスに切り替えます。たとえば、app.component にブレークを設定します。 .ts
![1576143130494377.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/578/499/728/1576143130494377.png)
をクリックしてデバッグ ボタンを開始すると、ブラウザ ページが自動的にポップアップ表示されます。
![1576143207513690.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/884/211/712/1576143207513690.png)
ページにアクセスすると、プログラムが実行されていることがわかります。
![1576143227526306.png vscode でコードをデバッグする方法](https://img.php.cn/upload/image/248/260/671/1576143227526306.png)
# ブレークポイントの場所で、変数を表示したり、例外をキャプチャしたり、コール スタックやその他のデバッグを行うことができます。
おすすめの関連記事とチュートリアル:
vscode チュートリアル
以上がvscode でコードをデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。