Visual Studio Code for Node.js を使用したブレークポイントのデバッグの詳細な説明-jsチュートリアル-php.cn

この記事では、主に Visual Studio Code を使用して Node.js ブレークポイントをデバッグする方法について詳しく説明します。興味のある方は参考にしてください。完璧なプログラムを作成し、ブレークポイントを使用してコードをデバッグできることは、一般的な要件です。

フロントエンド開発エンジニアとして、これまで開発したJavaScriptプログラムはすべてブラウザ側で実行されており、Chromeが提供する開発者ツールを使用することで、ソースコードのブレークポイントデバッグを簡単に行うことができます。詳細は示されていませんが、大まかな概要は次のとおりです。

コードの場合は、中断する必要があるコード行の左側でソースファイルを見つけます。が醜化されている場合は、対応するソースマップをインポートしてソースコードをマッピングする必要があります。
ページを更新します (ブレークポイントが設定されている場所がイベント処理関数の場合は、直接イベントをトリガーします)。このとき、コードがブレークポイントまで実行されると、プログラムはハングします。各変数の現在の値を確認して、プログラムが正常に実行されているかどうかを確認します。

ただし、JavaScript を使用してサーバー上で実行される Node.js プログラムを開発する場合、Chrome 開発者ツールは一時的に使用できなくなります。 Chrome でデバッグする方法はありますが、これは今日の説明の範囲を超えています。

また、console.log を使用すると言っていたクラスメート、まだ何も言わないでください...

実際、Node.js のデバッグをサポートする WebStorm の新しいバージョンを含む、多くの IDE にはデバッグ機能が統合されています。

しかし、多くの開発者は IDE が重すぎると感じています。ブレークポイントのデバッグを実装するための軽量のツールはありますか?今日は、VScode でブレークポイントデバッグを実行する方法を説明します。

JavaScript と TypeScript のすぐに使えるサポートに加えて、VScode は Node.js のデバッグもサポートしています。それは単にフロントエンドエンジニアのために生まれたものですよね...

Node.js をデバッグするための前提条件。 Node.js 環境がコンピューターにインストールされているということです。

何？ Node.js をインストールするにはどうすればよいですか? ここでちょっとしたヒントを紹介します。Baidu を開いて [Node.js のインストール] を検索します。

この記事では、Express アプリケーションのデバッグを例として取り上げ、Node.js 実行環境がインストールされていることを前提としています。

Express アプリを作成する

新しい Express アプリを作成するには、express-generator を使用します。

1. Express-generator をグローバルにインストールします

a. ターミナルを開き、次のように入力します:

npm install express-generator -g

ログイン後にコピー

MacBook ユーザーの場合は、グローバルにインストールするときに必ず sudo を追加してください

b.ターミナルに入力してください

express -v

ログイン後にコピー

以下の図に示されている情報が表示されれば、インストールは成功したことを意味します。

2. Express アプリケーションディレクトリを生成します。このアプリケーションの名前は myapp

とします。現在のディレクトリに myapp ディレクトリを生成するには、次のようにします。

ご覧のとおり、この小さなアプリケーションは、ノードサーバー構成、パブリックリソースフォルダー、マスター/弟子フォルダー、ルーティング構成を含めて完成しています。

3. Express アプリケーションを実行します

a. ターミナルでコマンド

express myapp

ログイン後にコピー

を入力して、プロジェクトディレクトリに入り、すべての依存関係をインストールします。この手順には時間がかかる場合があります。インストールが完了するまでお待ちください。完了。

b. 次に、コマンド

cd myapp && npm install

ログイン後にコピー

を入力してアプリケーションを起動します。

この時点で、ブラウザで localhost:3000 にアクセスすると、次のページが表示されます:

これは、Express アプリケーションが正常に実行できることを示しており、VScode を使用してコードをデバッグできることがわかります。

ヒント: デバッグ中のポートの競合を避けるために、最初に Express アプリケーションが実行されていたターミナルに戻り、ctrl+c を押して実行中の Express アプリケーションを閉じます。

Express アプリケーションをデバッグする

1. VScode インターフェイスに入り、インターフェイスの左側にある 4 番目のバグのようなボタンをクリックしてデバッグインターフェイスに入ります:

2. [構成なし] ドロップをクリックします。ページ上部のダウンメニューから「構成の追加」を選択します。

3.Node.js環境を選択します。

4. 選択が完了すると、.vscode ディレクトリがプロジェクトのルートディレクトリに生成され、このディレクトリにはさまざまな VScode エディターの設定が保存されます。このディレクトリには、lanuch.json という名前の設定ファイルが含まれています。設定ファイルの内容は次のとおりです。

最も重要な設定項目は、アプリケーション全体への入り口を定義するフィールドです。デバッガがオンになっている場合、アプリケーションはこのエントリから起動されます。

このフィールドにはすでに値があることがわかりました。パニックにならないでください。VScode がこの構成ファイルを初期化するときに、package.json に start というキー名を持つスクリプトが含まれているかどうかがチェックされるためです。含まれている場合は、start の内容だけです。設定は「プログラム」フィールドの値として使用されます。

5. [デバッグの開始] ボタン (緑色の三角形) をクリックしてデバッグを開始します。このとき、インターフェイスの上部にデバッグコントロールパネルが表示され、ページの右下にデバッグコンソールが表示され、出力した情報を確認できます。ステータスバーが下部に表示されます。次の図に示すように、現在のオレンジ色はアプリケーションが正常に実行されていることを示します:

6. 再度参照中に localhost:3000 にアクセスすると、ページが開くことができることがわかります。アプリケーションは正常に起動しました。

7. 次に、アプリケーションのブレークポイントの設定を開始します。 myapp/routes/index.js ファイルを開きます。このファイルは、アプリケーションのルートパスのルーティングを構成し、ページを返し、ビューのパラメーターとして文字列「Express」を渡します。

8. 行番号 6 の左側をマウスで左クリックすると、ブレークポイントを設定できます。ブレークポイントを追加する前にデバッグをオフにする必要があることに注意してください。オフにするには、インターフェイスの上にあるデバッグコントロールパネルの [停止] ボタン (赤い四角) をクリックします。

9. ブレークポイントを設定した後、デバッグを再開し、ブラウザで localhost:3000 にアクセスします。このとき、ブレークポイントの形状が変わり、プログラムはブレークポイントに留まり、デバッグコントロールのボタンが表示されます。パネルも変化します。左から右に、シングルステップスキップ、シングルステップデバッグ、シングルステップアウト、再起動、デバッグの停止です。これらは一般的なブレークポイントのデバッグ命令です。ブレークポイントを設定した後、デバッグを再開し、ブラウザで localhost:3000 にアクセスすると、ブレークポイントの形状が変わり、プログラムはブレークポイントに留まり、デバッグコントロールパネルのボタンも左から右に変わります。右側には、シングルステップスキップ、シングルステップデバッグ、シングルステップアウト、再起動、およびデバッグの停止があります。これらは一般的なブレークポイントのデバッグ命令です。