TypeScript+BrowserifyをVSCodeで

これまでいろいろと試行錯誤をしてきて、TypeScriptをトランスパイルして、その結果の.jsファイルをさらにBrowserifyして1つのファイルにし、.tsファイル上で設定したブレークポイントが正しく働くVSCodeでの開発環境設定ができたのでおさらい。

環境

  • VisualStudio Code 1.10.2
  • Debugger for Chrome 3.4.0
  • Node.js v6.11.3
  • npm 3.10.10

プロジェクトのセットアップ

こちらを参考に、以下のファイルを準備する。

  • .vscode/launch.json
  • .vscode/tasks.json
  • index.html
  • gulpfile.js
  • package.json
  • src/ts/tsconfig.json

サンプルをこちらに掲載。

デバッグ

構成より、Node.jsで実行する場合、Chromeで実行する場合を切り替える。
基本的にどちらでも正しくデバッグできるはず。

ただ、こちらでも言及されているように、Chromeで実行した場合には、まず1回目の読み込みでは正しくブレークポイントが動作せず
F5リロードを行うと、その時の読み込みでブレークポイントが動作する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です