デバッグツール（デバッグツール）
プログラムの実行状態を観察・操作してバグを発見する開発支援ツール。Chrome DevTools / VS Code Debugger / GDB / WinDbg / Xcode Instruments 等が代表。
概要
デバッグツール（Debug Tool / Debugger）は、プログラムの実行状態を観察・操作してバグを発見する開発支援ツールを指す。1947 年の Grace Hopper の「First Bug」（実物の蛾がリレーに挟まる）から始まり、現代ではブレークポイント・ステップ実行・変数監視・コールスタック・ヒープダンプ・タイムトラベルデバッグ等の多機能を持つ。2026 年現在、VS Code Debug API がフロントエンド + バックエンドの統合デバッグ標準として確立、Chrome DevTools の Performance Insights が Web 最適化のデファクト、Sentry / Datadog が本番監視の主流。
主要デバッグツール（2026 年）
ブラウザ / フロントエンド
| ツール | 価格 | 特徴 |
|---|---|---|
| Chrome DevTools | 無償 | Web 開発者の必須、Performance Insights |
| Firefox Developer Tools | 無償 | グリッド / フレックス UI 視覚化 |
| Safari Web Inspector | 無償 | iOS / Mac 専用 |
| React DevTools | 拡張無償 | コンポーネントツリー |
| Vue DevTools | 拡張無償 | Vue コンポーネント |
| Redux DevTools | 拡張無償 | 状態管理デバッグ |
| Lighthouse | 無償 | Performance / Accessibility / SEO 監査 |
IDE / エディタ統合
| ツール | 形態 |
|---|---|
| VS Code Debugger | OSS、Debug Adapter Protocol（DAP） |
| Cursor Debugger | VS Code 互換 |
| JetBrains IDE Debugger | 商用、IntelliJ / PyCharm / WebStorm |
| Visual Studio 2026 | 商用、.NET / C++ 向け |
| Xcode Instruments | 無償（Mac/iOS） |
| Android Studio Profiler | 無償 |
コマンドライン
| ツール | 言語 |
|---|---|
| GDB（GNU Debugger） | C / C++ / Rust / Go |
| LLDB | LLVM ベース、Apple Silicon 対応 |
| Delve（dlv） | Go 専用 |
| pdb / ipdb | Python |
| node --inspect | Node.js |
| pry / byebug | Ruby |
プロファイラ
| ツール | 用途 |
|---|---|
| perf（Linux） | CPU プロファイル、低オーバーヘッド |
| Intel VTune | Intel CPU 詳細解析 |
| Xcode Instruments | macOS / iOS、Time Profiler |
| Chrome DevTools Performance | フロントエンド |
| Bytehound | Rust ヒープ |
| py-spy | Python サンプリング |
本番モニタリング / APM
| 製品 | 価格 |
|---|---|
| Sentry | $26/月〜（エラー追跡） |
| Datadog APM | $31/host/月 |
| New Relic One | $0.30/GB |
| Honeycomb | $130/月〜 |
| Grafana + Loki + Tempo | OSS |
| AWS X-Ray | $5/100 万トレース |
ネットワーク / API デバッグ
| ツール | 用途 |
|---|---|
| Postman | API テスト、無償 |
| Insomnia | API 入門、無償 |
| Bruno | OSS API クライアント |
| Wireshark | パケットキャプチャ |
| Charles Proxy | HTTP プロキシ |
| mitmproxy | OSS HTTP プロキシ |
デバッグの基本テクニック
ブレークポイント設定
// VS Code: 行番号左クリック or F9
function calculate(x: number, y: number) {
const sum = x + y;
// ← ブレークポイント
return sum * 2;
}
Console ログ戦術（場合分け）
console.log("debug:", { x, y, result });
console.table(arrayOfObjects);
console.time("fetch"); fetch(url); console.timeEnd("fetch");
console.trace("called from here");
Source Maps
トランスパイル後の JS でも、元の TypeScript / JSX 行でブレークポイント。
Time-Travel Debugging（タイムトラベル）
実行履歴を保存し、過去の状態に戻れる。Chrome DevTools / rr（C++）/ Replay.io（Web）が代表。
自作.com（jisaku.com）でのデバッグ環境
開発時:
- VS Code + ESLint + TypeScript Strict
- Chrome DevTools（フロントエンド）
- Bun --inspect（API バックエンド）
本番監視:
- Sentry（エラー追跡）
- Cloudflare Analytics（トラフィック）
- PostgreSQL pg_stat_statements（SQL 性能）
- Vercel Speed Insights（Web Vitals）
PC スペック要件
- 個人開発: Ryzen 7 7700X / 32 GB RAM、ローカルデバッグで十分
- 大規模リモートデバッグ: Ryzen 9 9950X / 64 GB RAM
- C++ / Unreal Engine デバッグ: 大規模シンボル読込で 64 GB+ 推奨
- メモリプロファイル（heap dump 数 GB）: 128 GB+ RAM
関連用語との違い
| 用語 | 違い |
|---|---|
| プロファイラ | 性能解析、デバッグツールはバグ修正 |
| ロギング | ログ出力、デバッグツールは対話的 |
| トレーシング | 分散追跡、デバッグツールは単機 |
| Linter | 静的解析、デバッグツールは動的 |
よくある質問
Q1: console.log 禁止のチームでデバッグするには？ A: VS Code Debugger（ブレークポイント + 監視式）。本番では Sentry のエラー詳細 + breadcrumbs で再現。logger.debug() の方がレベル制御可能で console.log より優位。
Q2: Chrome DevTools の Performance タブは何が便利？ A: フレームレート / スクリプト実行 / レイアウト / ペイント / Composite を時系列で可視化。Web Vitals（LCP / INP / CLS）改善の起点として必須ツール。
Q3: Sentry と Datadog、どちらを選ぶ？ A: 個人 / スタートアップは Sentry（無償枠 + エラー追跡特化）。中規模以上 + APM + インフラ統合監視は Datadog（高機能だがコスト 5-10 倍）。
まとめ
- プログラムバグ発見の 対話的開発支援ツール
- 2026 年は VS Code Debugger + Chrome DevTools + Sentry が個人 / 中小の三種の神器
- 用途別に IDE 統合 / プロファイラ / APM を使い分け