Visual Studio Codeで、node.jsのデバッグを実行してみたい

なんかですね、短期間にVisual Studio Codeにぞっこんハマっちゃったみたいで、最近はもうテキストエディタというと間髪入れずにVisual Studio Code(VS Code)だ!という感じになってます。

まだまだYokka Grep+unEditorペアも健在ではありますが。

今回は、VS Codeなんですけど、強靭な機能を持ったテキストエディタから一歩進んで、デバッグ機能を使ってみたいなぁというところです。

元々、node.jsの開発環境として、VS Codeが強力に推薦されている事もあって、デバッグ機能を試してみるのはnode.jsがバッチリなのではないか。


■デバッグの準備

↑テキストエディタなのに、デバッグ(プログラムの実行を好きな場所で止めて、その時点の変数内容等を確認出来る)出来る・・・。

そのためにはやっぱり前準備が必要です。

そもそも警告が出てくるのですが、まずは対象プログラムが格納されているフォルダを開きます。

VS Codeには、フォルダを開くという機能があるのですが、これですね。

↑最初は、デバッグの設定が全くないのです。

構成を追加すると、基礎的なデバッグ用の構成ファイル(launch.json)が自動的に作られます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node.js(1)",
            "program": "${workspaceFolder}/SQL1.js",
            "args":["パラメータ1","パラメータ2"]
        },
    ]

}

↑自動生成された構成ファイルですが、初期状態だと、プログラムに外部からパラメータを渡す事が出来ないです。

"args"プロパティを追加し、渡したいパラメータは連続値で指定するようになっています。

↑デバックというと、コードを止めるわけですが、インラインブレークポイントで止めたい場所を直接指定してみます。

↑ウォッチ式には、常にモニターしたい変数を追加し、止めたい位置(ブレークポイント)はインラインブレークポイントで指定しています。

↑デバッグのスタート(F5キー)です。

↑ちなみに、ウォッチ式に指定していなくとも、最下行の入力エリアから、手入力で直接内容を見たい変数を指定できます。

しかも、インテリセンスが効くのです!

このあたり、メジャーIDEのeclipseよりも直感的で分かりやすいかも、です。

↑ゴゴゴゴーという感じでデバッグが開始され、ブレークポイントでコードが一時停止し、ウォッチ式に変数の内容がモニターされて来ました。

手入力(インテリセンス効く)での変数内容確認ももちろんOK。

テキストエディタなのにデバッグ出来るとはこれいかに!?

たとえば、eclipseもVisual Studio Communityも、とにかくスタートの敷居が高い本格的なIDEなんですが、VS Codeはどうでしょう。

テキストエディタなので、日常のお供として親しみを持ちつつ、ここぞという所でブーストアップしてIDEみたいな事もちょっと出来る。

こういう、親しみやすいものが欲しかった!!

しかも、節電モバイルPCのASUS E203MAでしっかり動くし!

いいねぇVS Code!!