Zenn
🔖

VSCodeでTypeScriptをデバッグしよう

2023/01/03に公開
VS Code
tech

VSCodeの内蔵のデバッグ機能を利用して
（ブラウザを利用せず）TypeScriptをデバッグしたいと思います

プロジェクトの立ち上げ

まずはデバッグ用のプロジェクト作りましょう

index.htmlというファイルを作ります

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="app.js" defer></script>
</body>
</html>

app.tsというファイルを作ります、テスト目的なので簡単なコードを入れておきます

app.ts
const array = [1,2,3,4,5];

for (let index = 0; index < array.length; index++) {
    const element = array[index];
}

TypeScript環境を用意します

npm init
npm install typescript
npx tsc --init

Configの設定

tsconfig.jsonというファイルの中に、compilerOptions.sourceMapを「true」にします

tsconfig.json
{
	"compilerOptions": {
		"sourceMap": true,
	}
}

コンパイルをします

npx tsc

Local Serverの立ち上げ

Live Serverというプラグインをインストールします

右下の「Go Live」をクリックします

サーバーのポートは5500です、つまりlocalhost:5500となります

VSCodeの設定

ここにクリックして、ブレイクポイントを入れます

デバッグパネルの「Run and Debug」をクリックします

「Web App (Chrome)」を選択します

launch.jsonというファイルが現れました、configurations.urlに「http://localhost:5500」を記入します

launch.json
{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
-			"url": "http://localhost:8080",
+			"url": "http://localhost:5500",
			"webRoot": "${workspaceFolder}"
		}
	]
}

デバッグパネルの緑のアイコンをクリックします

これでデバッグが動いています

Discussion