※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】VSCodeとChromeでブラウザデバッグする方法

web開発 TypeScript Debug デバッグ

投稿日：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を作成しましょう。

今回はブラウザのデバッグに必要な設定だけを作成します。

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "sourceMap": true
    }
}

"sourceMap": trueにしたことでTypeScriptをトランスパイルした際にJavaScriptからTypeScriptのコードにマッピングする.mapファイルが作成されます。

またトランスパイル後のJavaScriptコードはルートのdistディレクトリに作成されます。

これで必要な環境の作成は完了しました。

サンプルのコードの作成

デバッグに使用するサンプルのコードを作成します。

まずはTypeScriptのコードを作成します。

index.ts

/**
 * 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を作成します。

index.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という拡張機能をインストールします。

▲Debugger for Chrome

デバッガの起動には.vscode/launch.jsonという設定ファイルが必要になります。

エディタの左メニューの実行ボタン、またはCtrl + Shift + dでデバッガ―を開きます。

launch.jsonファイルを作成しますからChromeを選択するとlaunch.jsonが作成されます。

▲launch.jsonを作成

作成できない場合には、以下のlaunch.jsonを真似して手動で作成してください。

.vscode/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とデバッガが起動します！

▲デバッガの起動

デバッグできました！！

参考

参考サイト

https://code.visualstudio.com/docs/typescript/typescript-debugging

記事へのコメント

【TypeScript】VSCodeとChromeでブラウザデバッグする方法

はじめに

前提

実践

環境作成

サンプルのコードの作成

VSCodeを使ってデバッグ

デバッグ

参考

参考サイト

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次