TypeScript:
デバッガーの使い方

方法:

TypeScriptでデバッガを使い始めるには、サポートされているIDE(Visual Studio Codeなど)とlaunch.json設定が必要です。こちらはNode.jsアプリケーションのための簡単な例です:

// app.ts
function greet(name: string) {
    console.log(`Hello, ${name}!`);
}

const userName = 'Ada';
greet(userName);

これをデバッグするには、.vscodeフォルダの下にlaunch.jsonファイルを作成します:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

次に、IDEの行番号の左側をクリックしてgreet関数にブレークポイントを設定します。F5キーを押してデバッグを開始し、アプリがブレークポイントで一時停止するのを見ます。これで、変数をホバーしたり、式を監視したり、コードをステップ実行するのが簡単になります。

深掘り

かつて統合開発環境(IDE)が洗練される前は、デバッグはしばしばプリントステートメント(いわゆるconsole.logデバッグ)で行われていました。それなりに機能しましたが、目隠しをして干し草の山から針を見つけるようなものでした。

現代のデバッガは、トラブルシューティングのためのスイスアーミーナイフのようなものです。TypeScriptとNode.jsの進化に伴い、組み込みのNode.jsインスペクタからクライアントサイドデバッグのためのブラウザ開発ツールまで、さまざまなデバッガが利用可能です。

Node.jsインスペクタは、実行中のアプリケーションにアタッチして動作し、Chrome DevTools Protocol経由で通信します。これによって、Chromeブラウザが強力なデバッグコンソールに変わります。この統合により、従来のコマンドラインデバッグプラクティスと比較してビジュアル的にインタラクティブかつ詳細なデバッグセッションが可能になります。

参照

さらに読むために、そしてプロのヒントのために、こちらをチェックしてください: