JavaScript勉強会

JavaScriptの学習日記

Visual Studio CodeでJavaScriptをステップ実行する方法

JavaScriptを練習するときブラウザーで実行していました。

JavaScript(JS)のコードは、Visual Studio Code(VSCode)で書いています。

VSCode上でJSを実行して、動作確認する方法がありました。(メモ)

 

 

前提(準備)

今作業している環境は以下のとおりです。

  • Windows7(32ビット版)
  • Node.js (バージョン 0.12.0)
  • Visual Studio Code (バージョン 1.11.2)

を使っています。

 

Windowsパソコンの用意

 

Node.jsの用意

  1. Node.jsの公式インストーラーを使ってインストールする
  2. Node.jsのバージョン管理ツールを利用してインストールする
    1. nodistでNode.jsをインストールする方法
    2. nvmでNode.jsをインストールする方法

 

Visual Studio Codeの用意

Microsoft 「Visual Studio Code」でJavaScript学習 - JavaScript勉強会

 

準備ができたら、VSCodeを起動します。

 

Visual Studio Codeのデバッガー

VSCodeにはデバッグ機能が用意されていました。

 

(参考)

 

それでは、VSCodeのデバッガーを使ってみましょう!

 

VSCodeで「test.js」というファイルを作り、以下の内容を書きます。

var a = 1;
var b = 2;
var c = a + b;
console.log(c);

 

(1) VSCodeの左側にある虫のマーク(デバッグアイコン)をクリックします。

すると、画面左側が「デバッグビュー」になります。

f:id:jsstudy:20170504113645p:plain

 

(2) デバッグビューの上側にある三角形の「デバッグ開始」ボタンをクリックします。

すると、VSCodeのデバッガーが起動して、画面下側に結果が表示されます。

 

上記の例では、console.log(c);の内容が表示されて、「3」という結果が出ました。

 

Node.jsの設定 

このとき、特にNode.jsの設定をいじることもなく実行されました。

=「ノード v0.12.0 が検出されたため、レガシ プロトコルデバッグしています。」というメッセージが出て、そのまま実行結果が表示されました。

 

(このままで良いのか?よく分かりませんw→問題が出たら調査して変えます。)

 

ステップ実行

VSCodeでは「ブレークポイント」を使って、プログラムの「ステップ実行」ができます。

 

用語

ブレークポイント - Wikipedia

ブレークポイント(breakpoint)は、ソフトウェア開発のデバッグ作業において実行中のプログラムを意図的に一時停止させる箇所である。

ブレークポイントの指定機能は多くのデバッガに備えられており、これを用いることでプログラムの任意箇所への到達を自動的に捕捉できる。

ブレークポイントでの停止後、プログラマは通常のデバッグ作業同様に実行環境(メモリ、レジスタ、ログ、ファイルなど)を観察し、プログラムが期待通りに機能しているかどうかを判断する。

 

その1 デバッグの超基本「ステップ実行」

ステップ実行とは、プログラムを1行もしくは複数行ごとに手動で実行するデバッグ方法です。

Visual Studioのステップ実行には「ステップイン」「ステップオーバー」そして「ステップアウト」の3種類があります。

 

<ゲームを作ろう!>超初心者のためのプログラミング入門 - SESSION 11 その41 ステップオーバーとステップイン

f:id:jsstudy:20170504121744p:plain

f:id:jsstudy:20170504121753p:plain

 

  • ステップオーバー: 1行ずつ進む(関数の中には入らない)
  • ステップイン:   1行ずつ進む(関数の中にも入る。一番細かい実行
  • ステップアウト:  現在地から、自分の「呼出元」へ一気に進む

 

違いがよく分からない間は、一番細かい「ステップイン」でちまちま進めばOK

 

f:id:jsstudy:20170504120853p:plain

 

(1) コード行番号の左側をクリックすると、ブレークポイント(赤丸)が付きます。

(2) デバッグ開始ボタンをクリックします。

(3) ブレークポイントの内容が、デバッグビューに表示されます。

 

3行目で止めて観察した場合、変数aとbには値が代入されていますが、変数cにはまだ値が代入されていませんでした。

「ステップイン」ボタンをクリックして、1行進めてみます。

 

f:id:jsstudy:20170504124020p:plain

 

f:id:jsstudy:20170504124034p:plain

 

ブレークポイント(3行目)から1行進み、デバッグビューに変数cの内容が表示されました。

 

これで、ちょっと便利になりました!!!(・∀・)

 

まとめ

  • Visual Studio Codeで、虫のマークをクリックするとデバッグビューが表示される。
  • JSファイルを用意してJavaScriptのコードを書き、VSCodeのデバッガーで実行すると、Node.jsで処理されて、実行結果が表示される。
  • ブレークポイントを使って、ステップ実行ができる。

 

Visual Studio Code上でJavaScriptを実行して、手軽に練習してみたいと思います。

 

 

jsstudy.hatenablog.com