Visual Studio Codeでデバッグする！：Node.js

　Node.jsのデバッグ環境が欲しい！ということで調べると、Visual Studio Code（以下、VSCode）で簡単に出来ることがわかりました。
　VSCodeは既にエディタとして利用しているので、早速試してみました。

使用環境

　私が今回使用した環境です。

Mac OS X El Capitan Version 10.11.6
Node.js Version 7.2.1
Visual Studio Code Version 1.8.0

Node.jsのインストール

mmorley.hatenablog.com

VSCodeの入手とインストール

　VSCodeを未インストールの場合は、下記のサイトからインストーラを入手します。面倒な登録もなく無料で利用可能です。
　サイト内の『Download for Mac Stable Build』をクリックします。
code.visualstudio.com
　インストールは、ダウンロードした『VSCode-darwin-stable.zip』を解凍して、Applicationsフォルダに配置するだけです。

デバッグの設定

　新規にJavaScriptファイルを作成してデバッグする例を示します。

ApplicationsフォルダのVisual Studio Codeを起動
　初回起動時は、『“Visual Studio Code”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？』と聞かれるので『開く』をクリックします。
『エクスプローラ』をクリック
『フォルダーを開く』をクリック
エクスプローラで、作業用（JavaScriptのファイルを置く）フォルダを選択し、『開く』をクリック

補足 別フォルダを開く場合は、アプリケーションメニューの『ファイル』-
『フォルダーを閉じる』をクリックして、１度閉じてから開き直します。
エクスプローラで、先程開いたフォルダ（例では"workspace"フォルダ）の横の『（新しいファイル）』をクリックし、ファイル名に"test.js"と入力してEnterキーを押下

補足『（新しいファイル）』は、エクスプローラのフォルダ名の
付近にマウスを持っていくと現れます。

補足	別フォルダを開く場合は、アプリケーションメニューの『ファイル』- 『フォルダーを閉じる』をクリックして、１度閉じてから開き直します。

補足	『（新しいファイル）』は、エクスプローラのフォルダ名の付近にマウスを持っていくと現れます。

下記のコードをtest.jsにコピー＆ペースト
　前回作成したデスクトップのファイルを列挙するプログラムです。
　『var dirTarget = '/Users/ユーザ名/Desktop';』のユーザ名の部分は、使用中のユーザ名に書き換えて下さい。

var fs = require('fs'); // File System(Node API)：ファイル操作
var path = require('path'); // Path(Node API)：パスの文字列操作

var dirTarget = '/Users/ユーザ名/Desktop'; // 処理対象のフォルダ（サブフォルダ）を格納
var text = '';

// getFiles（ファイル情報取得関数）の定義と実行
(function getFiles(dir){
    var files = fs.readdirSync(dir); // 指定フォルダ内のファイル、サブフォルダのリストを取得
    files.forEach(function(file){ 
        var fullPath = path.join(dir, file); // フルパスを取得
        var stats = fs.statSync(fullPath)
        if(stats.isDirectory()){ // フォルダの場合
            getFiles(fullPath); // getFilesを再帰的に呼び出し
        }else{ // ファイルの場合
            // ファイル情報を取得
            text += file // ファイル名
                + ',' + stats.size // ファイルサイズ：単位バイト
                + ',' + stats.birthtime.getFullYear() + '/' // ファイル作成日：年
                + ('0' + (stats.birthtime.getMonth() + 1)).slice(-2) + '/' // ファイル作成日：月
                + ('0' + stats.birthtime.getDate()).slice(-2) // ファイル作成日；日
                + '\n'; 
        }
    });
})(dirTarget);

// ファイル書き出し
fs.writeFileSync( // テキストファイルに書き込み
    path.join(dirTarget, 'result.csv'), // 対象フォルダに結果ファイルを出力
    text // 書き込む文字列
);

キーボードの『Command + s』を押してコードを保存
デバッグをクリック
『（launch.jsonを開く）』をクリック
『Node.js』を選択
launch.jsonの11行目の"app.js"を"test.js"に変更し、キーボードの『Command + s』を押して保存

補足 ${workspaceRoot}は『フォルダーを開く』で開いたフォルダです。
デバッグするファイルを変更する場合は、このファイル名を変更します。

補足	${workspaceRoot}は『フォルダーを開く』で開いたフォルダです。デバッグするファイルを変更する場合は、このファイル名を変更します。

『（デバッグの開始）』をクリックして、デバッグを開始
f:id:mmorley:20161215153334p:plain:h100

補足	ブレークポイントを張るには、行頭をクリックします。解除するには再度クリックします。処理の中断中は、画面上部中央に表示される下図のパネルで操作します。左から再開ステップオーバー：１行ごとに実行（関数の呼び出し先は飛ばす）ステップイン：全て１行ずつ実行ステップアウト：現在の関数の最後まで実行（呼び出し元の次の行まで実行）再起動：最初からやり直す停止：終了する