Visual Studio Codeを使って、JavaScriptのプログラムをデバッグできるようになるまでの設定を紹介します。
Visual Studio CodeにはJavaScriptの開発を支援する機能がはじめから用意されているため、ブレークポイントなどの機能を簡単に使用できます。
アプリケーションのインストール
Visual Studio Codeとnode.jsをインストールします。
Visual Studio Codeをインストールする
Visual Studio Codeをインストールします。
Visual Studio Codeのページから、インストーラをダウンロードして実行すれば、インストールできます。
難しい設定はないので、詳細は省略します。
node.jsをインストールする
Windowsにnode.jsをインストールする方法は次のページをご覧ください。
Visual Studio CodeでJavaScriptのコードをデバッグする
Visual Studio CodeでJavaScriptのコードをデバッグする手順です。
フォルダーを作成する
JavaScriptのプログラムを配置するフォルダーを作成します。
今回は、ドキュメントフォルダーの下にsampleフォルダーを作成しました。
Visual Studio Codeでフォルダーを開く
Visual Studio Codeでフォルダーを開きます。
「エクスプローラー」ボタンを押します。
「フォルダーを開く」ボタンを押し、フォルダーを選択します。
フォルダーが開かれました。
JavaScriptのファイルを作成する
デバッグするJavaScriptのファイルを作成します。
「新しいファイル」ボタンを押します。
ファイル名を入力します。
ファイルが作成されました。
サンプルのコードを入力します。
var msg = 'hello world';
console.log(msg);
入力中は、エディターが入力を支援してくれます。
入力が終わったら、ファイルを保存します。
JavaScriptのコードをデバッグするための設定ファイルを作成する
「デバッグ」ボタンを押します。
デバッグの「開始」ボタンを押します。
デバッグの設定がなされていないため、どの環境を使用するか問い合わせがあります。
Node.jsを選択するか、Node.jsと入力します。
設定ファイルが作成されます。
そのまま保存します。
「エクスプローラー」ボタンを押します。
sampleフォルダーの下に「.vscode」フォルダーが作成されて、「.vscode」フォルダーの中にlaunch.jsonファイルが作成されていることが確認できます。
このlaunch.jsonファイルが設定ファイルになります。
JavaScriptのコードをデバッグする
app.jsをクリックして、app.jsを表示します。
行番号の左の余白をクリックして、ブレークポイントを設定します。
「デバッグ」ボタンを押します。
デバッグの「開始」ボタンを押します。
プログラムが実行され、ブレークポイントの行で停止します。
変数の状態などが表示されます。
「続行」ボタンを押すと、処理を続行します。
「ステップオーバー」ボタンを押すと、次の行に処理が移ります。
「ステップインする」ボタンを押すと、関数の中の行に処理が移ります。
「ステップアウトする」ボタンを押すと、関数を抜けます。
「停止」ボタンを押すと、プログラムを終了します。
実行するJavaScriptのファイルを変更する
デバッグ実行したときに実行されるJavaScriptのファイルは、launch.jsonの”configurations”→”program”で設定します。
初期値は「”${workspaceRoot}/app.js”」になっています。
ファイル名を変更すれば、任意のファイルを実行できます。