プロのようなデバッグ( vscodeのデバッガ) -シリーズ1
8783 ワード
デバッグは、それがソフトウェア開発に来る日常の仕事です.あなたがチームで働いているかどうか、単独で働くか、オープンソースプロジェクトに貢献して、我々はすべてのバグに遭遇します.これらのバグは、構文エラー、間違ったアルゴリズム、未終端のループなどによって引き起こされます.これらのバグを修正して最初に見つけなければなりません.
この記事では、Visual Studioコードでコードを直接デバッグする方法を学びます.JavaScriptアプリケーションを使用します.
Visual Studio Code Node.js
nodemon (オプションですが、このチュートリアルで使用されます)
Visual Studioのコードには、アプリケーションから直接デバッグするための作り付けのツールがあります.
Visual Studioのコードのデバッガのアイコンを使用すると、実行ポイントとデバッグポイント、呼び出しスタック、および対話型コンソールで実行中のアプリケーションとデバッグを起動または接続できます.
それを起こして走りましょう.
Visual Studioコードの開いているタブがデバッグ可能ファイルでない場合は、ファイルを開くをクリックし、デバッグするファイルを選択します.
タブは、デバッグ可能なファイルです.私は、進行中のキャンペーンのリストから期限切れの日付でキャンペーンを取り除くJavascriptファイルをデバッグしています.あなたはコードを見つけることができますhere , お気軽にクローンに沿って従ってください.
ブレークポイントを追加して、上記のイメージに示すように「実行」および「デバッグ」をクリックし、アプリケーションを実行する方法を選択するためのウィンドウをポップアップします.
下のイメージは、アプリケーションのデバッグ方法を説明しようとします.デバッガを実行すると、ブレークポイントを使用してコードで何が起こっているかを調べます.また、あなたのアプリケーションの変数をホープする能力を持っている場合は、意図した値を保持する参照してください.
このメソッドを使用すると、常に実行してデバッグを開始するには、デバッグを開始する必要があります.
を作成する方法を示すように沿って従ってください
下記の手順を使用する をクリックして起動を作成します.JSONファイル
メニューバーから「実行」を選択し、「構成を追加」を選択します
上の任意のメソッドを使用してポップアップウィンドウが表示されます.Visual Studioコードで直接アプリケーションをデバッグするには、Chromeを開くことなく、ノードを選択します.js
あなたの起動.JSONファイルは以下のイメージのようになります.設定の追加をクリックします.
を加えましょう
または単に以下のコードをコピーします
あなたの端末が以下のイメージのように見えるならば、我々は我々のデバッガを首尾よく開始しました.休憩ポイント、コンソールを追加してください.ログなどを開始し、デバッグを開始します.コードを変更すると、デバッガを自動再起動します.
あなたは単にタイピングであなたのアプリケーションで起こっているのログを見ることができます
注意:コンソールを使用している場合は、端末への変更を記録します.ログ.ブレークポイントや時計などの完全なデバッグ機能はありません.
デバッガは稼働中です.次のシリーズでは、簡単にコードをデバッグする他の方法を探索します.
このポストを楽しんでください.接続しましょう.
この記事では、Visual Studioコードでコードを直接デバッグする方法を学びます.JavaScriptアプリケーションを使用します.
必要条件
nodemon (オプションですが、このチュートリアルで使用されます)
ビジュアルスタジオコード
Visual Studioのコードには、アプリケーションから直接デバッグするための作り付けのツールがあります.

Visual Studioのコードのデバッガのアイコンを使用すると、実行ポイントとデバッグポイント、呼び出しスタック、および対話型コンソールで実行中のアプリケーションとデバッグを起動または接続できます.
それを起こして走りましょう.
構成
方法1 -実行とデバッグ


イメージa)
Visual Studioコードの開いているタブがデバッグ可能ファイルでない場合は、ファイルを開くをクリックし、デバッグするファイルを選択します.
イメージb)
タブは、デバッグ可能なファイルです.私は、進行中のキャンペーンのリストから期限切れの日付でキャンペーンを取り除くJavascriptファイルをデバッグしています.あなたはコードを見つけることができますhere , お気軽にクローンに沿って従ってください.
ブレークポイントを追加して、上記のイメージに示すように「実行」および「デバッグ」をクリックし、アプリケーションを実行する方法を選択するためのウィンドウをポップアップします.

下のイメージは、アプリケーションのデバッグ方法を説明しようとします.デバッガを実行すると、ブレークポイントを使用してコードで何が起こっているかを調べます.また、あなたのアプリケーションの変数をホープする能力を持っている場合は、意図した値を保持する参照してください.
このメソッドを使用すると、常に実行してデバッグを開始するには、デバッグを開始する必要があります.

方法2 -打ち上げを構成します。JSONファイル
を作成する方法を示すように沿って従ってください
launch.json
Visual Studioコードにアプリケーションをデバッグする方法を指定します.打ち上げ.jsonファイルはフォルダとして保存されます.vscode
. このファイルを作成するか、次の手順で自動作成できます.下記の手順を使用する



あなたの起動.JSONファイルは以下のイメージのようになります.設定の追加をクリックします.

を加えましょう
nodemon
設定のため、デバッグアイコンをクリックする必要はありません.

または単に以下のコードをコピーします
launch.json
ファイル {
"version": "0.2.0",
"configurations": [
{
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"name": "nodemon",
"program": "${workspaceFolder}/index.js",
"request": "launch",
"restart": true,
"runtimeExecutable": "nodemon",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js"
}
]
}
デバッガを起動するには、デバッガのアイコンをクリックし、デバッガの起動方法を選択します.我々は選択しますnodemon
このチュートリアルでは

あなたの端末が以下のイメージのように見えるならば、我々は我々のデバッガを首尾よく開始しました.休憩ポイント、コンソールを追加してください.ログなどを開始し、デバッグを開始します.コードを変更すると、デバッガを自動再起動します.

ぺこぺこする
あなたは単にタイピングであなたのアプリケーションで起こっているのログを見ることができます
node.index.js
or nodemon index.js
デバッグ時に変更が検出されたときに自動再起動を可能にする.注意:コンソールを使用している場合は、端末への変更を記録します.ログ.ブレークポイントや時計などの完全なデバッグ機能はありません.
結論
デバッガは稼働中です.次のシリーズでは、簡単にコードをデバッグする他の方法を探索します.
このポストを楽しんでください.接続しましょう.
Reference
この問題について(プロのようなデバッグ( vscodeのデバッガ) -シリーズ1), 我々は、より多くの情報をここで見つけました https://dev.to/osumgbachiamaka/debug-like-a-pro-debugger-in-vscode-series-1-5hn2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol