Check! Visual Studio Code で Node.js Express をデバッグ！

13224 ワード
Express.js VisualStudioCode Node.js Windows Windows10 Windows テキストリンク

こんばんは、cloudpack の @dz_ こと大平かづみです。

Prologue - はじめに

Bluemix で Node.js のウェブアプリを作りたくて、まずはローカルマシンに環境を作ってみました。

さらに、Node.jsのデバッグもできる Visual Studio Code のデバッグを試してみます♪

開発環境

  • Node.js
  • npm
  • Express
  • Visual Studio Code
  • Windows 10

各種インストール

Node.js のインストール

Node.js でインストーラーをダウンロードし、インストーラーを実行します。

Node.js のインストーラーを指示に従いながらインストールします。

Visual Studio Code のインストール

Visual Studio Code でインストーラーをダウンロード・実行し、インストールします。

Express のプロジェクトを作成する

それではさっそく、Express のプロジェクトを作っていきます。
Visual Studio Code の Node.js 開発ガイド を参考に、Express のひな形を作成してくれる express-generator を利用します。

それでは、PowerShell を起動して、コマンドを実行してみましょう。

# Expressジェネレーターをインストールする
PS> npm install -g express-generator

# 開発用のディレクトリを作成・ディレクトリへ移動する
PS> mkdir nodejsprojects
PS> cd nodejs\projects

# Express のひな形を作成する
PS> express myExpres

   create : myExpressApp
   create : myExpressApp/package.json
   create : myExpressApp/app.js
   create : myExpressApp/public
   create : myExpressApp/public/images
   create : myExpressApp/public/javascripts
   create : myExpressApp/routes
   create : myExpressApp/routes/index.js
   create : myExpressApp/routes/users.js
   create : myExpressApp/public/stylesheets
   create : myExpressApp/public/stylesheets/styl
   create : myExpressApp/views
   create : myExpressApp/views/index.jade
   create : myExpressApp/views/layout.jade
   create : myExpressApp/views/error.jade
   create : myExpressApp/bin
   create : myExpressApp/bin/www

   install dependencies:
     > cd myExpressApp && npm install

   run the app:
     > SET DEBUG=myExpressApp:* & npm start

# プロジェクトディレクトリに移動し、npm インストールを実行する
PS> cd myExpressApp
PS> npm install
[email protected] node_modules\debug
└── [email protected]

[email protected] node_modules\serve-favicon
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[email protected] node_modules\cookie-parser
├── [email protected]
└── [email protected]

[email protected] node_modules\morgan
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])

[email protected] node_modules\body-parser
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
└── [email protected] ([email protected], [email protected])

[email protected] node_modules\express
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules\jade
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

# ウェブアプリケーションを開始する
PS> npm start

すると以下のダイアログが表示されるので、通信を許可する対象を選択し、「アクセスを許可する」を押してください。

ブラウザで http://localhost:3000/ にアクセスすると、難なく Express のデフォルトページが表示され、PowerShellではアクセスログが出力されることが確認できました。

> [email protected] start C:\Users\dz\nodejs\projects\myExpressApp
> node ./bin/www

GET / 200 355.828 ms - 170
GET /stylesheets/style.css 200 3.206 ms - 111

ウェブアプリケーション(サーバー)を止めるには、 Ctrl + C で終了して下さい。

Visual Studio Code でデバッグしてみる

それではお楽しみの Visual Studio Code でデバッグをば！

そのまま PowerShell から VS Code を立ち上げることができます。

PS> code .

Express プロジェクトディレクトリが開かれた状態で、 VS Code が起動します。

開発ガイドに従って、 app.js にサンプルコードを記述してみます。

app.js
....
var app = express();

// ↓↓ ここから ↓↓
var msg = 'hello world';
console.log(msg);
// ↑↑ ここまで ↑↑
....

コード補完もばっちり効いていますね！

デバッグする

左のメニューバーのデバッグアイコン（虫っぽいアイコン）をクリックするとデバッグビューが表示されます。

それでは早速！ブレークポイントをつけて、左上のデバッグ開始ボタンを押しましょう。

おっしゃぁ、止まったぁ！

変数やコールスタックなどもしっかり表示されています。

ということで、あっさりデバッグできてしまいました。

ちなみに、もしデバッグ開始したときに not found 'node' on PATH (環境変数PATHに node がみつかりません。(うろ覚え)) というエラーが出た場合は、PATHに node が設定されてないので、マシンを再起動するなどして解消してみてください。

Epilogue - おわりに

Visual Studio Code を使い始めたのは、仕事の Mac で IDE を選ぼうとして特にこだわりなく迷ってしまい、リリースされたばかり VS Code に手を出したのがきっかけでした。

今の案件は PHP なのでデバッグはできませんけど、Git の差分表示が結構見やすく、重宝しています。

さらに、0.7 からPHPのコード補完ができるようになったので、 Sublime Text と併用して便利に使っています。

また、余談ですが、VS Code Node.js 開発ガイドには、TypeScript の利用についても書かれていますね。初期のころに少し触って使いやすいと感じたので、また書きたいです。

近況

最近

Phalcon関連

Webフレームワーク関連

クラウド・インフラ関連

技術ブログ寄稿

cloudpack技術ブログでも、AWS Lambda や 運用ツール Serf に関して記事を書いています。ご興味あれば読んでいただけると嬉しいです！