先ほどは完動するコードを例にステップ実行の手順を見た。が、実は上記のコードは古い書き方をしている。コマンドプロンプトやターミナルには次のような出力が行われているのだ。
express deprecated req.param(name): Use req.params, req.body, or req.query instead routes/index.js:15:31
そこで、もう一度ステップ実行をしながら、どう書き換えればよいかを考えてみよう。Webブラウザーで適当な名前と電話番号をもう一度入力して[OK]ボタンをクリックして、ブレークポイントで実行を中断する。ここで使うのは[WATCH]欄だ。[WATCH]の右側にマウスカーソルを持っていくと[+]ボタンが表示されるので、これをクリックしよう(その右にある二つのボタンはそれぞれ「WATCH欄に追加された項目を展開表示したもの全てを折りたたむ」(トグル式)および「追加した変数や式を全て削除」するのに使用する)。
[WATCH]欄に変数や式を追加すると、その評価結果が表示される
ここではメッセージにあったように「req.params」を入力してみたが「name」も「phone」もそこには表示されていない。これではないようだ。
このように[WATCH]欄には、開発者がこの内容を知りたいといった要素を任意に追加できる。プログラムコードの任意の領域を選択して、右クリックして、コンテキストメニューの[Debug: Add to Watch]を選択してもよい。
ここでは「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]欄が役に立つはずだ。
最後の[BREAKPOINTS]欄では、設定したブレークポイントやデバッグ実行を中断する例外の有効化/無効化を指定できる。
以上で[DEBUG]バーを利用した、デバッグ手順の基本はつかめたはずだ。最後に、VS Code 0.7.0について簡単にまとめておこう。
2015年8月中旬にはVS Codeのバージョンが0.7.0に上がった。ただし、Windows版ではちょっとした不具合があったようで、これだけその後に0.7.1となっている。0.7.[01]での改善点を以下にまとめる。
詳細については、VS Code 0.7.[01]のドキュメントを参照してほしい。
今回はNode.jsアプリのデバッグの手順を紹介した。次回は、ビューバー/サイドバーでまだ説明をしていない[SEARCH]バーや、これまでに紹介しきれていない小ネタを取り上げていくことにしよう。
最後にマイクロソフトから「Visual Studio Code Preview ファースト ステップ ガイド」が公開されているので紹介しておこう。VS Codeの使い方を包括的に取り上げたマイクロソフト純正のガイドなので、VS Codeを使いこなしたいという方は読んでみるとよいだろう。
Copyright© Digital Advantage Corp. All Rights Reserved.