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 協定（CDP）建構的工具、協定驅動、追蹤檢視器以及獨立前端。遵循 Awesome Manifesto，我們讓這份清單專注於真正有用的內容，而不是把該領域所有東西都收錄進來。

目錄

• 學習
• 追蹤與效能分析
• Chrome DevTools 協定
• 在其他平台上使用 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 協定

專業提示：開啟 Chrome 內建的 Protocol Monitor（More tools > Protocol monitor），即可在瀏覽器中即時觀察 CDP 流量並發出原始命令。

• ChromeDevTools/devtools-protocol - 協定的權威位置，包含 TypeScript 型別，也是協定缺陷的問題追蹤器。
• DevTools Protocol API Docs - 用於瀏覽協定各域、方法和事件的可互動介面。

使用協定進行開發

• 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 - 無 IO 封裝（另見 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 - 用戶端函式庫

代理式瀏覽器自動化

我們對這一節 極其 挑剔。現在所有人都在為代理封裝瀏覽器——任何新增另一個 MCP 伺服器或代理 CLI 的 PR 都將被關閉，除非它真正有影響力，並且在底層對 CDP 做了新穎的事情。

• chrome-devtools-mcp - Chrome DevTools 官方 MCP 伺服器，其中還包含一個 CLI。
• Webcmd - 將網站導覽編譯為面向 AI 代理的、確定性的按網站 CLI 命令。
• Lumen - 以視覺為先的瀏覽器代理，透過 CDP 實現自愈式確定性回放。
• bdg - 持久化的背景 CDP 工作階段，將 DOM、網路、主控台以及原始協定方法作為 shell 命令暴露出來。

瀏覽器轉接器

• devtools-remote-debugger - 透過用用戶端 JS 實作的 CDP 代理遠端除錯網頁。
• Inspect - 針對 iOS 與 Android 瀏覽器以及 WebView 使用 DevTools。（閉源）

在其他平台上使用 DevTools 前端

DevTools 的 UI 是一個透過 WebSocket 使用 CDP 的 Web 應用，因此你可以將其嵌入，或指向 Node、Ruby、行動端 WebView 或自訂執行環境（內建目標見 chrome://inspect）。

• ChromeDevTools/devtools-frontend - Chrome DevTools UI 的權威原始碼倉庫（以 chrome-devtools-frontend 形式發布在 npm 上）。
• 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 效能分析面板。

退役專案

一些舊專案，很可能已不再維護……但依然很酷。

• 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 除錯器（已被內建的 vscode-js-debug 取代，後者擁有豐富的 CDP/DAP 實作）。
• noice-json-rpc - 基於代理的 TypeScript/JS 函式庫，將 CDP 域直接作為 API 暴露。
• 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 - 透過 CDP 暴露 Mobile Safari 與 UIWebView 執行個體。
  • Remote Debug iOS WebKit adapter - 基於 ios-webkit-debug-proxy 建構，並將 WebKit 的遠端除錯協定轉換為 CDP。
• IE Diagnostics Adapter - 將 IE 11 轉換為 CDP 的協定轉接器。