Visual Studio CodeでNode.jsアプリをデバッグする：特集：VS Code早分かりガイド（4/4 ページ）
Visual Studio Codeが提供する各種のデバッグ機能を使って、Node.jsアプリをデバッグしていく方法を解説する。
［WATCH］欄を活用する
先ほどは完動するコードを例にステップ実行の手順を見た。が、実は上記のコードは古い書き方をしている。コマンドプロンプトやターミナルには次のような出力が行われているのだ。
express deprecated req.param(name): Use req.params, req.body, or req.query instead routes/index.js:15:31
「req.param(……)」ではなく、req.paramsやreq.bodyなどを使うべきというメッセージが表示されている。
そこで、もう一度ステップ実行をしながら、どう書き換えればよいかを考えてみよう。Webブラウザーで適当な名前と電話番号をもう一度入力して［OK］ボタンをクリックして、ブレークポイントで実行を中断する。ここで使うのは［WATCH］欄だ。［WATCH］の右側にマウスカーソルを持っていくと［＋］ボタンが表示されるので、これをクリックしよう（その右にある二つのボタンはそれぞれ「WATCH欄に追加された項目を展開表示したもの全てを折りたたむ」（トグル式）および「追加した変数や式を全て削除」するのに使用する）。
［WATCH］欄に変数や式を追加すると、その評価結果が表示される
ここではメッセージにあったように「req.params」を入力してみたが「name」も「phone」もそこには表示されていない。これではないようだ。
このように［WATCH］欄には、開発者がこの内容を知りたいといった要素を任意に追加できる。プログラムコードの任意の領域を選択して、右クリックして、コンテキストメニューの［Debug: Add to Watch］を選択してもよい。
「req.param('name')」の値を［WATCH］欄に追加する例
［WATCH］欄に追加したい部分を範囲選択して、右クリックするとコンテキストメニューが表示されるので、［Debug: Add to Watch］を選択する。［Debug: Run to Cursor］については後述する。
ここでは「req.params」ではなかったので、今度は「req.body」を追加してみた。その結果が以下だ。
よって、先ほどのコードは以下のように書き換えられる。
router.post('/', function(req, res) {
var newentry = { name: req.body.name, phone: req.body.phone } ;
phonenums = phonenums.concat(newentry);
res.redirect('/');
});
正当な使い方とはちょっと違うかもしれないが、このようにして［WATCH］欄に変数や式を追加していくことで、必要な情報をうまく取得できるようになるはずだ。
［CALL STACK］欄
［CALL STACK］欄には、関数／メソッドの呼び出し履歴が表示される。
本稿のサンプルのようなシンプルなプログラムではそれほど意味はないが、関数／メソッドがどのような経路で呼び出されてきたかがデバッグ時には重要になることもよくある。そのような場合には、［CALL STACK］欄が役に立つはずだ。
［BREADKPOINTS］欄
最後の［BREAKPOINTS］欄では、設定したブレークポイントやデバッグ実行を中断する例外の有効化／無効化を指定できる。
以上で［DEBUG］バーを利用した、デバッグ手順の基本はつかめたはずだ。最後に、VS Code 0.7.0について簡単にまとめておこう。
VS Code 0.7.0
2015年8月中旬にはVS Codeのバージョンが0.7.0に上がった。ただし、Windows版ではちょっとした不具合があったようで、これだけその後に0.7.1となっている。0.7.[01]での改善点を以下にまとめる。
- ドキュメントの改善： VS Code本体ではなく、そのドキュメントが充実したとのことだ。例えば、settings.jsonファイルで行う各種のカスタマイズに関連する情報がWeb上のドキュメントとしてまとめられている。他にもVS Codeで実行可能なタスクに関連するドキュメント、VS Codeでマークダウンを記述するためのドキュメントなどが充実した
- Node.jsアプリのデバッグ： 大規模なデータ構造の扱いを変更したことで、デバッグ時にデータを処理しきれずにタイムアウトすることがなくなった。また、以前のバージョンではJavaScriptコードの遅延パースによってブレークポイントが見えなくなることがあったが、0.7.[01]ではNode.jsに「--nolazy」フラグを渡すことで、遅延パースを抑制し、ブレークポイントが（Node.jsから）見えなくなることがなくなり、ブレークポイントが働かなくなることがなくなった
- launch.jsonファイルで変数を使用可能になった
- カーソル位置までデバッグ実行： 先ほどのコンテキストメニューにも表示されていたが、［Debug: Run to Cursor］が追加された。これはブレークポイントなどでデバッグ実行を中止した後に、カーソルを移動して、そこまでの実行を一度に行ってしまうものだ。関数やメソッドが長めの場合で、ここは実行を飛ばしても問題ないというときに活用するとよいだろう
- 言語関連： 言語ごとに少しずつサポートが充実されている（ここでは割愛する）
詳細については、VS Code 0.7.[01]のドキュメントを参照してほしい。
今回はNode.jsアプリのデバッグの手順を紹介した。次回は、ビューバー／サイドバーでまだ説明をしていない［SEARCH］バーや、これまでに紹介しきれていない小ネタを取り上げていくことにしよう。
最後にマイクロソフトから「Visual Studio Code Preview ファースト ステップ ガイド」が公開されているので紹介しておこう。VS Codeの使い方を包括的に取り上げたマイクロソフト純正のガイドなので、VS Codeを使いこなしたいという方は読んでみるとよいだろう。
Copyright© Digital Advantage Corp. All Rights Reserved.