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ブラウザが強力なデバッグコンソールに変わります。この統合により、従来のコマンドラインデバッグプラクティスと比較してビジュアル的にインタラクティブかつ詳細なデバッグセッションが可能になります。
参照
さらに読むために、そしてプロのヒントのために、こちらをチェックしてください: