読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

Visual Studio Codeでデバッグする!:Node.js

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

使用環境

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

Node.jsのインストール

    Node.jsが未インストールの場合は、下記の記事を参考にして下さい。 mmorley.hatenablog.com

VSCodeの入手とインストール

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

デバッグの設定

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

  1. ApplicationsフォルダのVisual Studio Codeを起動
     初回起動時は、『“Visual Studio Code”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?』と聞かれるので『開く』をクリックします。
  2. エクスプローラ』をクリック
    f:id:mmorley:20161215120101p:plain:h200
  3. 『フォルダーを開く』をクリック
    f:id:mmorley:20161215120441p:plain:h200
  4. エクスプローラで、作業用(JavaScriptのファイルを置く)フォルダを選択し、『開く』をクリック
    補足別フォルダを開く場合は、アプリケーションメニューの『ファイル』-
    『フォルダーを閉じる』をクリックして、1度閉じてから開き直します。

    f:id:mmorley:20161215120739p:plain:h200
  5. エクスプローラで、先程開いたフォルダ(例では"workspace"フォルダ)の横の『f:id:mmorley:20161215121301p:plain(新しいファイル)』をクリックし、ファイル名に"test.js"と入力してEnterキーを押下
    補足f:id:mmorley:20161215121301p:plain(新しいファイル)』は、エクスプローラのフォルダ名の
    付近にマウスを持っていくと現れます。
    f:id:mmorley:20161215121114p:plain:h200
  6. 下記のコードを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 // 書き込む文字列
    );
    

  7. キーボードの『Command + s』を押してコードを保存
  8. デバッグをクリック
    f:id:mmorley:20161215121658p:plain:h200
  9. f:id:mmorley:20161215125641p:plain(launch.jsonを開く)』をクリック
    f:id:mmorley:20161215124815p:plain:h100
  10. 『Node.js』を選択
    f:id:mmorley:20161215141636p:plain:h100
  11. launch.jsonの11行目の"app.js"を"test.js"に変更し、キーボードの『Command + s』を押して保存
    補足${workspaceRoot}は『フォルダーを開く』で開いたフォルダです。
    デバッグするファイルを変更する場合は、このファイル名を変更します。
    f:id:mmorley:20161215145848p:plain
  12. f:id:mmorley:20161215153413p:plainデバッグの開始)』をクリックして、デバッグを開始
    f:id:mmorley:20161215153334p:plain:h100
    補足ブレークポイントを張るには、行頭をクリックします。
    解除するには再度クリックします。
    f:id:mmorley:20161215204203p:plain:h95

    処理の中断中は、画面上部中央に表示される下図のパネルで操作します。
    f:id:mmorley:20161215212515p:plain
    左から
    • 再開
    • ステップオーバー:1行ごとに実行(関数の呼び出し先は飛ばす)
    • ステップイン:全て1行ずつ実行
    • ステップアウト:現在の関数の最後まで実行(呼び出し元の次の行まで実行)
    • 再起動:最初からやり直す
    • 停止:終了する

あとがき

 VSCodeはJavaScriptの予測変換機能もあるし、デバッグ機能もあるので便利ですね。
 無料で使えるのが不思議です。

広告を非表示にする