Visual Studio CodeでTypeScriptをデバッグ-using TypeScript babel webpack

オウルです。

フロントで TypeScript を使うとなると当然デバッグしたい。console.log でデバッグなんて、時間がかかるし、コード追加しないといけないので嫌だ。TypeScript のデバッグは、作業効率においてかなり大事

そんな思いから、今回は TypeScript babel webpack を使う ASP.NET Core プロジェクトを準備して、Visual Studio Code(以降、VSCode)で、TypeScript をデバッグします。

ローカル環境

Client OS Windows10
WSL Ubuntu 18.04.2 LTS
Editor Visual Studio Code
SDK ASP.NET Core 3.1

ASP.NET Core の Developing in WSL はこちらを参考にしてください。

TypeScript babel webpack

TypeScript babel webpack メリットと導入方法

以下の記事で紹介しています(Windows 10 + Visual Studio 2019 環境での導入方法)

TypeScript babel webpack インストール

ここからは、前回作成した ASP.NET Core プロジェクトを使用します。

まず、WSL Ubuntu に接続します。コマンドプロンプトを起動して wsl と入力後 Enter します。 作成済の ASP.NET Core MVC プロジェクトファイルのディレクトリに移動して、次のコマンドを実行します。

パッケージインストール

これで各種インストールと構成ファイルの作成が完了しました。次は TypeScript のデバッグに必要となるソースマップを出力するように構成します。

tsconfig.json

babel.config.js

webpack.config.js

次に、ビルド、トランスパイル、バンドルを実行できるように npm-scripts を構成します。

npm-scripts 構成

package.json

補足: npm-scripts を VS Code のサイドパネルから実行

表示/コマンドパレット or Ctl+Shift+P でコマンドパレットを表示します。Preferences: Open User Settings と入力すると VS Code の基本設定タブが表示されます。拡張機能/NPM の Enable Script Explorer を On にします。

次は、tasks.json に npm-scripts をタスクとして追加します。

tasks.json

npm-scripts

“problemMatcher” には、「TypeScript + Webpack Problem Matchers for VS Code」拡張機能を使用しています。

続いて、前回作成した “build-mvc” タスクの前に “build-npm-script” タスクを実行するように変更します。

シーケンシャル実行

“dependsOrder”: “sequence” を使ってシーケンシャルに実行します。

次は、launch.json のデバッグ構成を変更します。

launch.json

前回作成した “Launch MVC” の “preLaunchTask” を先ほど作成したタスクに変更します。

Debugger for Chrome

続いて本日のメインテーマである TypeScript をデバッグ するために Debugger for Chrome(前回インストール済み)の構成を追加します。

サンプルコード

WebApi.Controllers.WeatherForecastController に丁度いい Get アクションが用意されているので、WebMvc.Views.Home.Index ビューから取得して表示するサンプルコードを準備します。

Main.ts

HttpClient.ts

Web Mvc のビューから fetch() を使った WebApi 接続になるので mode をデフォルトの ”same-origin” から ”cors” に変更しています。また、WebApi 側で CORS を有効にする必要があります(今回は ASP.NET Core のお話ではないので Api 側の実装は省略)。

WeatherForecast.ts

WebMvc.Views.Home.Index.cshtml

デバッグ

それではデバッグしてみましょう。launch.json で構成した ”exec AspNetCoreApp” を実行します。

次に、Main.ts の任意の場所にブレイクポイントを設定して ”Launch Chrome MVC” を実行します。

これで開発効率、あがりそうです。

コメントを残す

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

CAPTCHA