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 - Делитесь и просматривайте веб-трассировки производительности прямо в панели Performance DevTools (исходный код).
• speedscope - Быстрый интерактивный просмотрщик flamegraph, импортирующий .cpuprofile и таймлайн-трассировки Chrome.
• cpupro - Глубокий анализатор V8/Chrome .cpuprofile с flamegraph, деревьями вызовов и диагностикой горячих точек.
• Perfetto - Набор для системного профилирования и анализа трассировок (ui.perfetto.dev) с поддержкой трассировок Chromium и SQL-запросов к трассировкам.

---

Chrome DevTools Protocol

Профессиональный совет: включите встроенный в Chrome Protocol Monitor (More tools > Protocol monitor), чтобы наблюдать живой CDP-трафик и отправлять сырые команды прямо в браузере.

• ChromeDevTools/devtools-protocol - Каноническое расположение JSON протокола, типов TypeScript и трекера проблем для ошибок протокола.
• DevTools Protocol API Docs - Обозреваемый интерфейс для изучения доменов, методов и событий протокола.

Разработка с протоколом

• chrome-remote-interface Wiki - Удобные рецепты для типичных низкоуровневых задач CDP.
• Chrome Protocol Proxy - Прокси для инспекции и отладки клиентского CDP-трафика.

Две крупные библиотеки автоматизации

• Puppeteer - Высокоуровневый Node.js API для управления Chrome через CDP и WebDriver BiDi. См. также 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 - Высокоуровневый headless-клиент Chrome
• Java: chrome-devtools-java-client - Низкоуровневый клиент протокола
• Java: jvppeteer - Headless Chrome для Java
• 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 - Высокоуровневый API управления Chrome
• Ruby: Cuprite - Драйвер Capybara
• Kotlin: chrome-devtools-kotlin - Клиентская библиотека на корутинах
• Kotlin: kdriver - Высокоуровневая автоматизация на корутинах
• Clojure: clj-chrome-devtools - Автогенерируемая обёртка CDP
• Clojure: cuic - Высокоуровневая автоматизация UI-тестов
• PHP: chrome-devtools-protocol - Клиентская библиотека

Агентная автоматизация браузера

Мы чрезвычайно придирчивы к этому разделу. Сейчас все оборачивают браузер для агентов — любой PR, добавляющий очередной MCP-сервер или CLI-агент, будет закрыт, если только у него нет реального веса и он не делает чего-то нового с CDP под капотом.

• chrome-devtools-mcp - Официальный MCP-сервер для Chrome DevTools, который также включает CLI.
• Webcmd - Компилирует навигацию по сайту в детерминированные по-site CLI-команды для ИИ-агентов.
• Lumen - Браузерный агент с приоритетом зрения и самовосстанавливающимся детерминированным воспроизведением через CDP.
• bdg - Постоянная фоновая CDP-сессия, предоставляющая DOM, сеть, консоль и сырые методы протокола как shell-команды.

Браузерные адаптеры

• devtools-remote-debugger - Удалённая отладка веб-страницы через CDP-агент, реализованный на клиентском JS.
• Inspect - Используйте DevTools против браузеров и WebView iOS и Android. (закрытый исходный код)

Использование фронтенда DevTools с другими платформами

UI DevTools — это веб-приложение, говорящее по CDP через WebSocket, поэтому вы можете встроить его или направить на Node, Ruby, мобильные webview или пользовательские среды выполнения (встроенные цели см. в chrome://inspect).

• ChromeDevTools/devtools-frontend - Канонический исходный репозиторий UI Chrome DevTools (опубликован в npm как chrome-devtools-frontend).
• Chii и Eruda - Сервер удалённой отладки, использующий реальный UI devtools-frontend (Chii, современная замена Weinre) и консоль DevTools внутри страницы для мобильных (Eruda).
• vscode-js-debug - Официальный совместимый с DAP отладчик JavaScript и Chrome CDP, питающий VS Code.
• VS Code - Elements for Microsoft Edge - Панели Elements и Network, встроенные в VS Code.
• Debugging Node.js with Chrome DevTools - Руководство по отладке и профилированию Node.js с node --inspect.
• ruby/debug - Официальный отладчик Ruby, поддерживающий подключение Chrome DevTools через CDP (rdbg --open=chrome).

---

Расширения DevTools

• React Developer Tools - Инспектируйте иерархии компонентов React, props и flamegraph профайлера.
• Vue.js Developer Tools - Инспектируйте компоненты, состояние и маршрутизацию Vue.js.
• Angular DevTools - Инспекция дерева компонентов и профилирование обнаружения изменений для Angular.
• Redux Devtools - Отладка с путешествием во времени и история действий для Redux.
• Ember.js Inspector - Инспектируйте объекты, маршруты и данные Ember.js.
• Web Component DevTools - Инспектируйте, изменяйте и наблюдайте пользовательские элементы и shadow DOM на странице.
• Clockwork - Профилирование PHP-приложений и инспекция запросов в DevTools.
• RailsPanel - Панель профилирования запросов и SQL Ruby on Rails.

Архив

Старые проекты, вероятно, больше не поддерживаются… Но всё ещё крутые.

• ndb - Улучшенный опыт отладки Node.js, построенный на фронтенде DevTools.
• thetool - Профилирование CPU, памяти, покрытия и типов для Node.js.
• Facebook Stetho - Нативная отладка Android с Chrome DevTools.
• PonyDebugger - Удалённая отладка сети и Core Data для iOS-приложений через Chrome DevTools.
• betwixt - Системный сетевой прокси, инспектируемый через автономную панель Network DevTools.
• Dirac - Отладка ClojureScript с пользовательским форком DevTools.
• VS Code - Debugger for Chrome - Исходный отладчик Chrome для VS Code (заменён встроенным vscode-js-debug, имеющим богатую реализацию CDP/DAP).
• noice-json-rpc - Библиотека TypeScript/JS на основе прокси, предоставляющая домены CDP напрямую как API.
• PuPHPeteer - PHP-мост к Node Puppeteer.
• Insight - Набор инструментов отладки WebGL для Chrome DevTools.
• Remote Debug Gateway - Подключите отладочный клиент сразу к нескольким браузерам.
  • Многопользовательский DevTools: DevTools Remote - Удалённая отладка чужого браузера.
• DevTools Backend - Автономная реализация бэкенда Chrome DevTools для отладки произвольных веб-сред.
• Python CDP-драйвер: pychrome - Низкоуровневый обработчик транспорта CDP.
• ios-webkit-debug-proxy - Предоставляет экземпляры Mobile Safari и UIWebView через CDP.
  • Remote Debug iOS WebKit adapter - Строится на ios-webkit-debug-proxy и переводит Remote Debugging Protocol WebKit в CDP.
• IE Diagnostics Adapter - Адаптер протокола, переводящий IE 11 в CDP.