デバッガーの極意：Visual Studio Codeを使ってAngular2 TypeScriptを徹底解剖
Visual Studio CodeでAngular2 TypeScriptをデバッグと実行する方法
前提条件
- Visual Studio Codeがインストールされていること
- Node.jsがインストールされていること
- Angular CLIがインストールされていること
- Angularプロジェクトが作成されていること
手順
デバッグを実行する
以下のいずれかの方法でデバッグを実行できます。
- F5キーを押す
- メニューバーから「実行」>「デバッグの開始」を選択する
- デバッグパネル（Ctrl+Shift+D）を開き、「Launch Chrome: Launch Angular」構成を選択してをクリックする
ブレークポイントを設定する
ステップ実行
ブレークポイントでコードが停止したら、ステップ実行を使用して、コードを1行ずつ実行することができます。
- F10キーを押すと、1行ずつステップ実行できます。
- Shift+F11キーを押すと、次のブレークポイントまでステップ実行できます。
変数を検査する
- スコープの表示: 変数が宣言されたスコープを表示します。
- 呼び出し履歴の表示: 現在の関数を呼び出した関数のリストを表示します。
- 式の評価: デバッガー内で式を評価して、その結果を確認できます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular2 TypeScript Demo';
constructor() { }
}
<h1>{{ title }}</h1>
<p>This is a sample Angular2 TypeScript application.</p>
h1 {
color: red;
}
package.json
{
"name": "angular2-typescript-demo",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/cli": "^13.0.0",
"@angular/core": "^13.0.0",
"@angular/compiler": "^13.0.0",
"@angular/platform-browser": "^13.0.0",
"@angular/platform-browser-dynamic": "^13.0.0",
"rxjs": "^6.6.3",
"tslib": "^2.3.1",
"typescript": "~4.6.2"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"sourceMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"skipLibCheck": true,
"esModuleResolution": "node",
"experimentalDecorators": true,
"paths": {
"@angular/*": ["node_modules/@angular/*"]
}
}
}
-
新しいAngularプロジェクトを作成します。
ng new angular2-typescript-demo -
プロジェクトをビルドして実行します。
ng serve
Karmaは、JavaScriptとTypeScriptのテストフレームワークです。Karmaを使用して、Angularコンポーネントを含むユニットテストをデバッグすることができます。
Karmaでユニットテストをデバッグするには、以下の手順を実行します。
- プロジェクトにKarmaを設定します。
- テストを実行します。
- デバッガーでテストをステップ実行します。
Chrome拡張機能を使用したデバッグ
いくつかのChrome拡張機能を使用して、Angular2 TypeScriptアプリケーションをデバッグすることができます。これらの拡張機能は、デバッグエクスペリエンスをさらに強化する追加機能を提供します。
人気のChrome拡張機能には、以下のものがあります。
- Angular DevTools: Angularコンポーネント、データバインディング、変更検出などを検査するためのツールを提供します。
- Web Developer: ソースコードの編集、ブレークポイントの設定、変数の検査など、さまざまなデバッグ機能を提供します。
Visual Studio Codeの拡張機能を使用したデバッグ
Visual Studio Codeには、デバッグエクスペリエンスを強化する拡張機能が多数あります。
- Debugger for Chrome: ChromeデバッガーをVisual Studio Codeに統合します。
- TSLint: TypeScriptコードの静的解析を提供します。
これらの方法は、Visual Studio CodeでAngular2 TypeScriptをデバッグする機能をさらに拡張します。
Visual Studio Codeは、Angular2 TypeScriptプロジェクトをデバッグするための強力なツールです。基本的なデバッグ手順に加えて、Karma、Chrome拡張機能、Visual Studio Code拡張機能を使用して、デバッグエクスペリエンスをさらに強化することができます。
angular typescript visual-studio-code
