VisualStudioCodeでJavaScriptのプログラムをデバッグする

Visual Studio Codeを使って、JavaScriptのプログラムをデバッグできるようになるまでの設定を紹介します。

Visual Studio CodeにはJavaScriptの開発を支援する機能がはじめから用意されているため、ブレークポイントなどの機能を簡単に使用できます。

アプリケーションのインストール

Visual Studio Codeとnode.jsをインストールします。

Visual Studio Codeをインストールする

Visual Studio Codeをインストールします。

Visual Studio Codeのページから、インストーラをダウンロードして実行すれば、インストールできます。

VisualStudioCode

難しい設定はないので、詳細は省略します。

node.jsをインストールする

Windowsにnode.jsをインストールする方法は次のページをご覧ください。

Visual Studio CodeでJavaScriptのコードをデバッグする

Visual Studio CodeでJavaScriptのコードをデバッグする手順です。

フォルダーを作成する

JavaScriptのプログラムを配置するフォルダーを作成します。

今回は、ドキュメントフォルダーの下にsampleフォルダーを作成しました。

jsdebug01

Visual Studio Codeでフォルダーを開く

Visual Studio Codeでフォルダーを開きます。

「エクスプローラー」ボタンを押します。

jsdebug02

「フォルダーを開く」ボタンを押し、フォルダーを選択します。

jsdebug03

フォルダーが開かれました。

jsdebug04

JavaScriptのファイルを作成する

デバッグするJavaScriptのファイルを作成します。

「新しいファイル」ボタンを押します。

jsdebug05

ファイル名を入力します。

jsdebug06

ファイルが作成されました。

jsdebug07

サンプルのコードを入力します。

var msg = 'hello world';
console.log(msg);

入力中は、エディターが入力を支援してくれます。

jsdebug08

入力が終わったら、ファイルを保存します。

JavaScriptのコードをデバッグするための設定ファイルを作成する

「デバッグ」ボタンを押します。

jsdebug09

デバッグの「開始」ボタンを押します。

jsdebug10

デバッグの設定がなされていないため、どの環境を使用するか問い合わせがあります。

jsdebug11

Node.jsを選択するか、Node.jsと入力します。

jsdebug12

設定ファイルが作成されます。
そのまま保存します。

jsdebug13

「エクスプローラー」ボタンを押します。

jsdebug14

sampleフォルダーの下に「.vscode」フォルダーが作成されて、「.vscode」フォルダーの中にlaunch.jsonファイルが作成されていることが確認できます。
このlaunch.jsonファイルが設定ファイルになります。

JavaScriptのコードをデバッグする

app.jsをクリックして、app.jsを表示します。

jsdebug15

行番号の左の余白をクリックして、ブレークポイントを設定します。

jsdebug16

「デバッグ」ボタンを押します。

jsdebug17

デバッグの「開始」ボタンを押します。

jsdebug18

プログラムが実行され、ブレークポイントの行で停止します。
変数の状態などが表示されます。

jsdebug19

「続行」ボタンを押すと、処理を続行します。

jsdebug20

「ステップオーバー」ボタンを押すと、次の行に処理が移ります。
「ステップインする」ボタンを押すと、関数の中の行に処理が移ります。
「ステップアウトする」ボタンを押すと、関数を抜けます。
「停止」ボタンを押すと、プログラムを終了します。

実行するJavaScriptのファイルを変更する

デバッグ実行したときに実行されるJavaScriptのファイルは、launch.jsonの”configurations”→”program”で設定します。
初期値は「”${workspaceRoot}/app.js”」になっています。
ファイル名を変更すれば、任意のファイルを実行できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください