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

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Visual Studio CodeでTypeScriptのデバッグ

TypeScript

Expressを使ったアプリをデバッグしてみたいと思います。

プロジェクトの作成

フォルダを作って以下のコマンドを打って必要なモジュールをインストールしておきます。

npm init -y
npm install express --save
npm install gulp gulp-typescript gulp-sourcemaps --save-dev

ソースフォルダを作ってTypeScript関連の必要なものをインストールしておきますおきます。

mkdir src
cd src
tsd init -y
tsd install express -save

srcフォルダにtsconfig.jsonという名前でファイルを作って以下の内容を書いておきます。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs"
    }
}

srcフォルダにapp.tsという名前で以下のファイルを作ります。

import * as express from 'express';

var port = process.env.PORT || 3000;
var app = express();

app.get('/', (req, res, next) => {
    res.send('Hello world');
});

app.listen(port);

gulpfile.jsでビルドするようにします。ポイントはsourceRootをきちんと指定しておくところです。

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build', function() {
    var p = ts.createProject('./src/tsconfig.json');
    return gulp.src('./src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(p))
        .js
        .pipe(sourcemaps.write('.', { sourceRoot: '../src'}))
        .pipe(gulp.dest('./bin'));
});

Debug

F5を押してNode.jsを選びます。launch.jsonを以下のように書き換えます。ポイントは、programとsourceMapsとoutDirを変えることです。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "src/app.ts",
            "stopOnEntry": false,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": true,
            "outDir": "bin"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        }
    ]
}

programにTypeScriptを指定して、sourceMapsをtrueにしてoutDirにJavaScriptの出力フォルダを書きます。

もう一度F5で実行。適当にブレイクポイントを置いて実行すると以下のようにブレイクポイントで止まってくれます。

f:id:okazuki:20160112202040p:plain