Chrome DevTools

Source: https://github.com/ChromeDevTools/awesome-chrome-devtools at 83087609da17
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

Awesome Chrome DevTools

Chrome DevTools エコシステムにおける素晴らしいツールとリソース

Chrome DevTools および Chrome DevTools Protocol（CDP）を中心に構築されたツール、プロトコルドライバー、トレースビューア、スタンドアローンフロントエンド。Awesome Manifesto に従い、このリストは分野のすべてを網羅するのではなく、本当に有用なものに絞っています。

目次

• 学習
• トレースとプロファイリング
• Chrome DevTools Protocol
• 他のプラットフォームで DevTools フロントエンドを使う
• DevTools 拡張機能
• 過去のプロジェクト

---

学習

• Dev Tips - アニメーション GIF で示す豊富なヒント集。
• DevTools Tips - ミニチュートリアル形式の図解ヒント集。
• Web cheatcodes - 開発者以外向けのブラウザ開発者ツール。
• Dear Console - ブラウザのコンソールで使うスニペット集。
• Chrome Secret Menus - Chrome の内部 chrome:// ページと診断ツールのガイド。
• Front-end Debugging Tools Handbook - DevTools、フレームワーク拡張、IDE を横断するフロントエンドデバッグの実践ガイド。

---

トレースとプロファイリング

DevTools の Performance トレースや V8 の .cpuprofile ログは裏側では単なる JSON であり、いくつかのスタンドアローンビューアがそれを活用しています：

• trace.cafe - DevTools の Performance パネルで Web パフォーマンストレースを直接共有・閲覧（ソース）。
• speedscope - Chrome の .cpuprofile やタイムライントレースをインポートする高速でインタラクティブなフレームグラフビューア。
• cpupro - フレームグラフ、コールツリー、ホットスポット診断を備えた高度な V8/Chrome .cpuprofile アナライザー。
• Perfetto - システムプロファイリングとトレース解析スイート（ui.perfetto.dev）。Chromium トレース対応と SQL トレースクエリを備える。

---

Chrome DevTools Protocol

プロ向けのヒント：Chrome 内蔵の Protocol Monitor（More tools > Protocol monitor）をオンにすると、ブラウザ内で生 CDP トラフィックを監視し、生コマンドを発行できます。

• ChromeDevTools/devtools-protocol - プロトコル JSON の正規の場所。TypeScript 型とプロトコル不具合の issue トラッカーを含む。
• DevTools Protocol API Docs - プロトコルのドメイン、メソッド、イベントを探索するためのブラウズ可能な UI。

プロトコルを使った開発

• chrome-remote-interface Wiki - 一般的な生 CDP タスクの便利なレシピ。
• Chrome Protocol Proxy - CDP クライアント通信を検査・デバッグするためのプロキシ。

二大自動化ライブラリ

• Puppeteer - CDP と WebDriver BiDi 経由で Chrome を制御する高レベル Node.js API。awesome-puppeteer も参照。
• Playwright - Chromium、Firefox、WebKit 向けのクロスブラウザ自動化。Node.js、Python、.NET、Java に対応。awesome-playwright も参照。

プロトコル（またはその上の層）を駆動するライブラリ

• JavaScript/Node.js: chrome-remote-interface - 低レベル CDP クライアント
• Rust: chromiumoxide - 生成型を持つ非同期/tokio ライブラリ
• Rust: Rust Headless Chrome - 高レベルなヘッドレス Chrome クライアント
• Java: chrome-devtools-java-client - 低レベルなプロトコルクライアント
• Java: jvppeteer - Java 向けヘッドレス Chrome
• Python: Zendriver - 非同期 CDP ブラウザ自動化
• Python: PyCDP - 入出力なしのラッパー（Trio driver も参照）
• Python: ChromeController - 高レベルなブラウザ管理
• Go: chromedp - 高レベルなアクションとタスク
• Go: Rod - 高レベルな自動化とスクレイピング
• Go: cdp - CDP の型安全なバインディング
• C#/.NET: Puppeteer Sharp - Puppeteer の移植
• C#/.NET: dotnet-chrome-protocol - ランタイムライブラリとスキーマコード生成
• Ruby: Ferrum - Chrome を制御する高レベル API
• Ruby: Cuprite - Capybara ドライバー
• Kotlin: chrome-devtools-kotlin - コルーチンベースのクライアントライブラリ
• Kotlin: kdriver - コルーチンベースの高レベル自動化
• Clojure: clj-chrome-devtools - 自動生成された CDP ラッパー
• Clojure: cuic - 高レベルな UI テスト自動化
• PHP: chrome-devtools-protocol - クライアントライブラリ

エージェント型ブラウザ自動化

このセクションには 極めて 厳格です。現在、誰もがブラウザをエージェント向けにラップしています — 実際の支持を得ており、かつ裏側で CDP を使って新しいことをしていない限り、別の MCP サーバーやエージェント CLI を追加する PR はクローズされます。

• chrome-devtools-mcp - Chrome DevTools 公式の MCP サーバー。その中に CLI も含む。
• Webcmd - サイトナビゲーションを AI エージェント向けのサイトごとの決定的な CLI コマンドにコンパイルする。
• Lumen - 視覚優先のブラウザエージェント。CDP 上で自己修復する決定的なリプレイを備える。
• bdg - DOM、ネットワーク、コンソール、生プロトコルメソッドを shell コマンドとして公開する永続的なバックグラウンド CDP セッション。

ブラウザアダプター

• devtools-remote-debugger - クライアント側 JS で実装された CDP エージェントを通じて Web ページをリモートデバッグする。
• Inspect - iOS および Android のブラウザや WebView に対して DevTools を使用。（クローズドソース）

他のプラットフォームで DevTools フロントエンドを使う

DevTools の UI は WebSocket 経由で CDP を話す Web アプリなので、Node、Ruby、モバイル WebView、カスタムランタイムに埋め込んだり、それらを対象にしたりできます（組み込みターゲットは chrome://inspect を参照）。

• ChromeDevTools/devtools-frontend - Chrome DevTools UI の正規のソースリポジトリ（npm では chrome-devtools-frontend として公開）。
• Chii と Eruda - 本物の devtools-frontend UI（Chii、Weinre の現代的な代替）とページ内モバイル DevTools コンソール（Eruda）を使ったリモートデバッグサーバー。
• vscode-js-debug - VS Code を支える公式の DAP 互換 JavaScript および Chrome CDP デバッガー。
• VS Code - Elements for Microsoft Edge - VS Code 内に組み込まれた Elements および Network パネル。
• Debugging Node.js with Chrome DevTools - node --inspect を使った Node.js のデバッグとプロファイリングのガイド。
• ruby/debug - Ruby 公式のデバッガー。CDP 経由で Chrome DevTools への接続をサポート（rdbg --open=chrome）。

---

DevTools 拡張機能

• React Developer Tools - React コンポーネント階層、props、プロファイラーのフレームグラフを検査。
• Vue.js Developer Tools - Vue.js のコンポーネント、状態、ルーティングを検査。
• Angular DevTools - Angular 向けのコンポーネントツリー検査と変更検出のプロファイリング。
• Redux Devtools - Redux 向けのタイムトラベルデバッグとアクション履歴。
• Ember.js Inspector - Ember.js のオブジェクト、ルート、データを検査。
• Web Component DevTools - ページ上のカスタム要素とシャドウ DOM を検査・変更・監視。
• Clockwork - DevTools での PHP アプリケーションプロファイリングとリクエスト検査。
• RailsPanel - Ruby on Rails のリクエストおよび SQL プロファイリングパネル。

過去のプロジェクト

古いプロジェクト、おそらくもうメンテされていない……でもまだ cool。

• ndb - DevTools フロントエンド上に構築された改善された Node.js デバッグ体験。
• thetool - Node.js 向けの CPU、メモリ、カバレッジ、型プロファイリング。
• Facebook Stetho - Chrome DevTools を使ったネイティブ Android デバッグ。
• PonyDebugger - Chrome DevTools 経由で iOS アプリのリモートネットワークと Core Data をデバッグ。
• betwixt - スタンドアローンの DevTools Network パネルで検査されるシステムレベルのネットワークプロキシ。
• Dirac - カスタム DevTools フォークを使った ClojureScript デバッグ。
• VS Code - Debugger for Chrome - VS Code 向けの当初の Chrome デバッガー（豊富な CDP/DAP 実装を持つ組み込みの vscode-js-debug に取って代わられた）。
• noice-json-rpc - CDP ドメインを直接 API として公開するプロキシベースの TypeScript/JS ライブラリ。
• PuPHPeteer - Node Puppeteer への PHP ブリッジ。
• Insight - Chrome DevTools 向けの WebGL デバッグツールキット。
• Remote Debug Gateway - デバッグクライアントを一度に複数のブラウザに接続。
  • マルチユーザー DevTools：DevTools Remote - 他者のブラウザをリモートデバッグ。
• DevTools Backend - 任意の Web 環境をデバッグするための Chrome DevTools バックエンドのスタンドアロン実装。
• Python CDP ドライバー：pychrome - 低レベルな CDP トランスポートハンドラー。
• ios-webkit-debug-proxy - Mobile Safari と UIWebView のインスタンスを CDP 経由で公開。
  • Remote Debug iOS WebKit adapter - ios-webkit-debug-proxy を基に構築され、WebKit の Remote Debugging Protocol を CDP に変換する。
• IE Diagnostics Adapter - IE 11 を CDP に変換するプロトコルアダプター。