プロのようなデバッグ( vscodeのデバッガ) -シリーズ1

デバッグは、それがソフトウェア開発に来る日常の仕事です.あなたがチームで働いているかどうか、単独で働くか、オープンソースプロジェクトに貢献して、我々はすべてのバグに遭遇します.これらのバグは、構文エラー、間違ったアルゴリズム、未終端のループなどによって引き起こされます.これらのバグを修正して最初に見つけなければなりません.
この記事では、Visual Studioコードでコードを直接デバッグする方法を学びます.JavaScriptアプリケーションを使用します.

必要条件

Visual Studio Code

Node.js

nodemon (オプションですが、このチュートリアルで使用されます)

ビジュアルスタジオコード

Visual Studioのコードには、アプリケーションから直接デバッグするための作り付けのツールがあります.

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

構成

方法1 -実行とデバッグ

イメージa）

Visual Studioコードの開いているタブがデバッグ可能ファイルでない場合は、ファイルを開くをクリックし、デバッグするファイルを選択します.

イメージb）

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

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

方法2 -打ち上げを構成します。JSONファイル

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

をクリックして起動を作成します.JSONファイル

メニューバーから「実行」を選択し、「構成を追加」を選択します

上の任意のメソッドを使用してポップアップウィンドウが表示されます.Visual Studioコードで直接アプリケーションをデバッグするには、Chromeを開くことなく、ノードを選択します.js

あなたの起動.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 デバッグ時に変更が検出されたときに自動再起動を可能にする.
注意:コンソールを使用している場合は、端末への変更を記録します.ログ.ブレークポイントや時計などの完全なデバッグ機能はありません.

結論

デバッガは稼働中です.次のシリーズでは、簡単にコードをデバッグする他の方法を探索します.
このポストを楽しんでください.接続しましょう.