Libx Awesomeリスト

    このページの内容

    Awesome Chrome DevTools

    Chrome DevToolsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    学習

    • Dev Tips - アニメーション GIF によるヒントの大規模なコレクション。
    • DevTools Tips - ミニチュートリアル形式のイラスト付きヒント集。
    • Can I DevTools? - さまざまなワークフローを文書化。毎週のヒントとコツのニュースレターも提供。
    • Web cheatcodes - 非開発者向けのブラウザー開発者ツール。
    • Dear Console - ブラウザーコンソールで使えるスニペット集。
    • Chrome Secret Menus - Chrome の内部ページと診断ツールの包括的なガイド。
    • Front-end Debugging Tools Handbook - Chrome DevTools、フレームワーク拡張、AI 強化 IDE デバッグまで、フロントエンドのデバッグツールを習得するための実践ガイド。

    DevTools のツールとエコシステム

    オブジェクトの整形

    ネットワーク検査

    • betwixt - Network パネルによる検査を提供するシステムレベルのネットワークプロキシ。

    CPU プロファイル

    • call-trace - JS にフックを組み込み、完全な（サンプリングなしの）実行について .cpuprofile を生成可能。時間または呼び出し回数を表示できます。
    • cpuprofilify - 各種プロファイリング／サンプリングツールの出力を .cpuprofile 形式に変換。
    • Wishbone Python framework - プロファイリングデータを .cpuprofile としてエクスポートできます。

    マルチメディア

    • snapline - タイムラインのスクリーンショットを gif に変換。

    タイムライン、トレース、プロファイリング

    エディターとの Chrome Debugger 統合

    Chrome DevTools Protocol

    プロトコルを使った開発

    二大自動化ライブラリ

    • Puppeteer - DevTools Protocol 経由でヘッドレス Chrome を制御する高水準 API を提供する Node.js 向けライブラリ。awesome-puppeteerも参照。
    • Playwright - 単一 API で Chromium、Firefox、WebKit を自動化するライブラリ。Node.js、Python、.Net、Java で利用可能。awesome-playwrightも参照。

    プロトコル（またはその上位レイヤー）を操作するライブラリ

    • JavaScript/Node.js: chrome-remote-interface
    • TypeScript/Node.js: chrome-debugging-client
    • TypeScript/Node.js: noice-json-rpc - CDP を API として公開するプロキシベースの実装。
    • TypeScript/Node.js: Taiko
    • TypeScript/Node.js: Lumen - CDP 上で自己修復型の決定論的リプレイを行う、ビジョンファーストのブラウザーエージェント。
    • Rust: Rust Headless Chrome
    • Java: chrome-devtools-java-client
    • Java: jvppeteer - Java 向けヘッドレス Chrome
    • Python: PyCDP - 純粋な Python による、sans-IO ラッパー。Trio CDP driverも参照。
    • Python: chromewhip - splash サービスのドロップイン代替品
    • Python: pyppeteer - Puppeteer の移植版
    • Python: ChromeController - 高水準のブラウザー管理
    • Go: chromedp - ブラウザーを操作する高水準のアクションとタスク
    • Go: cdp
    • Go: gcd
    • Go: godet
    • Go: Rod
    • C#/.NET: Puppeteer Sharp - Puppeteer の移植版
    • C#/dotnet: chrome-dev-tools - handlebars テンプレートの編集でカスタマイズできるプロトコルラッパージェネレーター。.Net Core テンプレートを含みます。
    • C#/.NET: dotnet-chrome-protocol - C#/.NET で Chrome DevTools Protocol をサポートするランタイムライブラリとスキーマコード生成ツール。
    • Ruby: Ferrum - Ruby で Chrome を制御する高水準 API
    • Ruby: Cuprite - Capybara ドライバー
    • Kotlin: chrome-reactive-kotlin - Kotlin 向け reactive（rxjava 2.x）低水準クライアントライブラリ
    • Kotlin: chrome-devtools-kotlin - 低水準 CDP プリミティブと高水準拡張を提供する、コルーチンベースのクライアントライブラリ。
    • Clojure: clj-chrome-devtools - CDP ラッパー API は自動生成され、CDP プロトコルの変更時に更新されます。
    • Clojure: cuic - DevTools Protocol による UI テスト自動化向けの高水準 API を提供。
    • PHP: chrome-devtools-protocol - プロトコル用の PHP クライアントライブラリ。
    • PHP: PuPHPeteer - node Puppeteer 向け PHP ブリッジ

    ブラウザーアダプター

    • devtools-remote-debugger - Web ページに対して devtools を使うためのもの。クライアント側 JS で実装された CDP エージェント。
    • Inspect - iOS と Android に対して容易に devtools を使用。ブラウザーと Webview に対応。（クローズドソース）

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

    Android

    • Facebook Stetho - Chrome DevTools によるネイティブ Android のデバッグ。
    • j2v8-debugger - J2V8 上で実行する JavaScript を Chrome DevTools でデバッグ。

    ClojureScript

    • Dirac - ClojsureScript のデバッグ。

    iOS

    • PonyDebugger - Chrome DevTools で iOS アプリをリモートからネットワーク・データデバッグ。

    Node.js

    • ndb - DevTools Frontend を使う改善された Node.js デバッグ体験。
    • Debugging Node.js with Chrome DevTools - Node v6.3+ で完全なデバッグとプロファイリングのサポートを使うためのガイド。
    • thetool - Node による CPU、メモリ、カバレッジ、型のプロファイリング。
    • chrome-devtools-frontend - Chrome に同梱されるフロントエンドのミラー。

    Ruby

    アプリケーション

    ブラウザー

    • BrowserBox - DevTools を主に利用して Chrome を Web ページへ埋め込み、マルチユーザーブラウジング、リモート DevTools、音声、.docx、.pdf などのドキュメントをサポート。
    • Puppetromium - Puppeteer を用いて構築された概念実証の Web ブラウザー。Node.js、HTML、CSS で記述され、クライアント側 JavaScript は 0% です。

    Web アーカイバーとインデクサー

    • dn - オフライン表示と検索のために閲覧ページをアーカイブ・索引化。Fetch ドメインのインターセプトを使って実装され、Chromium ベースの任意のブラウザーで動作します。

    DevTools 拡張機能

    ワークフロー

    • Clockwork - PHP アプリケーションのプロファイリングデータを表示。
    • RailsPanel - Ruby on Rails アプリケーションのプロファイリングデータを表示。
    • React Developer Tools - React コンポーネント階層を検査。
    • Ember.js Inspector - アプリケーション内の Ember.js オブジェクトを検査できます。
    • Vue.js Developer Tools - Vue.js コンポーネントを検査し、データを操作。
    • Angular DevTools - Angular アプリケーションのデバッグとプロファイリング。
    • Backbone Debugger - Backbone アプリケーションのビュー、モデル、イベント、ルートを検査。
    • Redux Devtools - アクション履歴、取り消し、リプレイを通じて Redux を検査。
    • Insight - 生産性の高い WebGL 開発と効率的な WebGL アプリケーションを可能にする WebGL デバッグツールキット。
    • BEM devtools - i-bem フレームワークで表現された BEM エンティティを検査。
    • Web Component DevTools - ページ上の Web Components を検査、変更、監視。

    テーマ

    パフォーマンス

    • sloth - 選択したタブに対する CPU・ネットワークスロットリングを有効化・保存できる Chrome 拡張。
    • TracerBench - Web アプリケーションの制御されたパフォーマンスベンチマークツール。パフォーマンス差分について明確で実行可能な有用な洞察を提供。

    自動化

    • Puppeteer IDE - ブラウザーの開発者ツール内で使えるスタンドアロンの Puppeteer プレイグラウンド。
    • k6 browser - ブラウザーと対話し、フロントエンドのパフォーマンスメトリクスを収集するブラウザー自動化・エンドツーエンド Web テストツール。

    過去のプロジェクト

    古いプロジェクトで、おそらく現在は保守されていません……それでも素晴らしいものです。