記事が見づらいなどの問題がありましたらContactからお知らせください。
【TypeScript】VSCodeとChromeでブラウザデバッグする方法
投稿日：2020年12月2日
TypeScriptはJavaScriptを拡張した静的型付言語です。 非常に便利な言語なのですが、フロントWebページを作成する場合、デバッグの手順が少し複雑です。 この記事ではVSCodeを利用したブラウザデバッグの方法について詳しく解説しています。
はじめに
TypeScriptはJavaScriptを拡張した静的型付言語です。
非常に便利な言語なのですが、フロントWebページを作成する場合、デバッグの手順が少し複雑です。
この記事ではVSCodeを利用したブラウザデバッグの方法について詳しく解説しています。
前提
この記事は以下の環境を前提にしています。
- VSCodeインストール済（バージョン1.46.0以降）
- nodejsバージョン10.19.0
- npmバージョン6.14.4
- Bashターミナル
実践
環境作成
まずは必要なファイルを作成していきます。
$ mkdir bc_browser
$ cd bc_browser
$ npm init
$ npm install --save-dev typescript次にプロジェクトのルートにTypeScriptのプロジェクトの設定tsconfig.jsonを作成しましょう。
今回はブラウザのデバッグに必要な設定だけを作成します。
{
"compilerOptions": {
"outDir": "dist",
"sourceMap": true
}
}"sourceMap": trueにしたことでTypeScriptをトランスパイルした際にJavaScriptからTypeScriptのコードにマッピングする.mapファイルが作成されます。
またトランスパイル後のJavaScriptコードはルートのdistディレクトリに作成されます。
これで必要な環境の作成は完了しました。
サンプルのコードの作成
デバッグに使用するサンプルのコードを作成します。
まずはTypeScriptのコードを作成します。
/**
* id="root"の要素にこんにちは！！という文字列を追加する
*/
function writeGreeting() {
document.getElementById("root").innerHTML = "こんにちは！！";
}
/**
* id="root"の要素にHello World!!という文字列を追加する
*/
function greeting() {
document.getElementById("root").innerHTML += "Hello World!!";
}
document.getElementById("btn-main").onclick = greeting;
writeGreeting();TypeScriptのコードをトランスパイルしたJavaScriptを呼び出すHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<button id="btn-main">メイン</button>
</body>
<script type="text/javascript" src="./dist/index.js"></script>
</html>必要なファイルの作成は完了しました。
先にこのWebページが正しく動くかテストしてみましょう。
はじめにTypeScriptをトランスパイルします。
$ tscこれでdistディレクトリにindex.jsとindex.js.mapが作成されたはずです。
エクスプローラでindex.htmlをダブルクリックしてブラウザで開いてみます。
ページにはこんにちは！！という文字列とメインというボタンが表示されています。メインというボタンをクリックする度にページにHello World！！という文字列が追加されていくはずです。
VSCodeを使ってデバッグ
ここでVSCodeのデバッガを利用してみます。
まずは左のメニューから拡張機能をクリック、またはCtrl + Shift + xで拡張機能メニューを開きます。
msjsdiag.debugger-for-chromeを検索し、Debugger for Chromeという拡張機能をインストールします。
デバッガの起動には.vscode/launch.jsonという設定ファイルが必要になります。
エディタの左メニューの実行ボタン、またはCtrl + Shift + dでデバッガ―を開きます。
launch.jsonファイルを作成しますからChromeを選択するとlaunch.jsonが作成されます。
作成できない場合には、以下のlaunch.jsonを真似して手動で作成してください。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.html",
"file": "/home/ogihara/ts/debug_browser/index.html"
}
]
}これでデバッグの準備ができました！
デバッグ
では実際にデバッグしてみます。
まずはtscコマンドでTypeScriptコードをトランスパイルします。
$ tsc次にTypeScriptのデバッグしたいところにブレークポイントをはさみます（はさみたいところの左側をクリックして赤丸を設置）。
左メニューの実行から実行、またはCtrl + Shift + dでデバッグメニューを開きます。
再生ボタンのプルダウンメニューからOpen index.htmlを選び再生ボタンをクリックしてください。
Chromeとデバッガが起動します！
デバッグできました！！
参考
参考サイト
-
2020年11月12日【TypeScript】TSConfigの基礎
-
2021年5月8日【TypeScript】Pick<Type, Keys>について詳しく解説Pick<Type, Keys>は型の一部を柔軟に抜き出して、新しい型を作ることのできる…
-
2020年11月8日Ubuntu20.04LTSでTypeScriptの環境を構築
-
2020年11月15日【TypeScript】TSConfigで型推論のAny型を禁止TypeScriptの型推論のAny型には十分注意する必要があります。TSConfigで…
-
2021年4月11日【TypeScript】Objectにアクセサを定義する関数の作成方法についてこの記事ではTypeScriptでオブジェクトにgetter、setterを簡単に追加す…
-
2021年3月29日【React + TypeScript】GoogleMapReactコンポーネントを使う-Part2