В помощь веб-разработчику: полезные проекты и инструменты для работы с Chrome DevTools

Работу современного веб-разработчика сложно представить без вспомогательных инструментов. Один из самых популярных — Chrome DevTools. Этот набор инструментов помогает тестировать, отлаживать, профилировать, проверять код на соответствие тем или иным стандартам и многое другое.

Подборка содержит ссылки на множество проектов, которые будут полезны тем, кто работает с инструментами разработчика Chrome. Думаете, что чего-то не хватает? Делитесь в комментариях.

Обучение

  • Dev Tips — большая коллекция советов в форме гифок.

Chrome DevTools как среда разработки

  • Chrome DevTools App — standalone-приложение, которое запускает инструменты разработчика Chrome в отдельном процессе и совершенно независимо от Chrome. Однако обратите внимание, что поддержка проекта завершилась в 2015 году.
  • DevTools Remote — удалённая отладка через инструменты разработчика. Позволяет дать разработчику доступ к отдельной вкладке браузера на стороне пользователя.
  • DevTools Snippets — набор сниппетов для запуска в инструментах разработчика.

DevTools Snippets

Инструменты и экосистема

Форматирование объектов

  • immutable-devtools — настраиваемое форматирование для Immutable.js.

Проверка сети

  • betwixt — анализ трафика в отдельном окне вне браузера с использованием интерфейса, похожего на вкладку Network инструментов разработчика.

Профилирование процессора

  • call-trace — позволяет записать граф вызовов и (опционально) время, потраченное на выполнение каждой функции JS-файла. Есть возможность генерации файла .cpuprofile.
  • cpuprofilify — преобразует выходные данные разных профилировщиков в формат .cpuprofile.

Временные графики, трассировка и профилирование

  • DevTools Timeline Viewer — делитесь ссылками на записи временных графиков.
  • snapline — преобразует снимки временного графика в gif.

Интеграция отладчика Chrome с IDE

  • VS Code – Debugger for Chrome — расширение VS Code, позволяющее отлаживать JavaScrip-код в браузере Google Chrome или любом другом приложении, поддерживающим протокол Chrome DevTools.

VS Code – Debugger for Chrome

Протокол Chrome DevTools

Протокол Chrome DevTools позволяет сторонним приложениям отслеживать, профилировать и отлаживать код в Chromium, Chrome и других Blink-based браузерах.

  • DevTools Protocol API Docs — документация по протоколу.
  • ChromeDevTools/devtools-protocol — багтрекер для проблем с протоколом.
  • Remote Debug Gateway — позволяет проводить отладку сразу в нескольких браузерах.
  • DevTools Backend — standalone-реализация бекенда инструментов разработчика Chrome для отладки произвольных веб-платформ вроде приложений HbbTV на Smart TV.
  • RemoteDebug — универсальные протоколы отладки для современных браузеров.
  • ChromeDriver — официальная реализация Selenium/WebDriver для Chrome, работающая на основе протокола инструментов разработчика.
  • Chrome Protocol Proxy — обратный прокси для отладки с помощью протокола инструментов разработчика.
  • Puppeteer — Node-библиотека, предоставляющая высокоуровневый API для управления Chrome или Chromium через протокол инструментов разработчика.

Библиотеки на различных языках для работы с протоколом

  • JavaScript/Node.js: chrome-remote-interface — наиболее используемый JavaScript API для протокола.
  • TypeScript/Node.js: chrome-debugging-client — TypeScript-клиент для отладки с поддержкой async/await.
  • Java: cdp4j — Java-библиотека, которую можно использовать для тестирования веб-страниц. Используется с Chrome/Chromium.
  • Java: karate — фреймворк с Java API для тестирования веб-сервисов, работает с Chrome с помощью протокола инструментов разработчика.
  • Python: PyChromeDevTools — Python-обёртка для протокола инструментов разработчика Chrome.
  • Python: chromewhip — сервис, который запускает процесс headless Chrome, обёрнутый в HTTP API.
  • Python: pychrome — Python-пакет для протокола инструментов разработчика Chrome.
  • Go: chromedp — простой способ для работы в Go с браузерами, поддерживающими протокол инструментов разработчика Chrome, без нужды во внешних зависимостях вроде Selenium или PhantomJS.
  • Go: cdp — библиотека на Go для протокола.
  • Go: gcd — неофициальная реализация удалённого отладчика Google Chrome на Go.
  • Go: godet — удалённый клиент для инструментов разработчика Chrome.
  • C#/dotnet: chrome-dev-tools — C# обёртка на основе акутальной версии протокола. Можно настраивать с помощью шаблонов.
  • Ruby: ChromeRemote — клиентская реализация протокола на Ruby.
  • Kotlin: chrome-reactive-kotlin — реактивная (rxjava 2.x) низкоуровневая библиотека на Kotlin.
  • Clojure: clj-chrome-devtools — библиотека для протокола на Clojure. Обёртка для API протокола генерируется автоматически и обновляется при его изменении.
  • PHP: chrome-devtools-protocol — клиент для протокола на PHP.

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

  • chrome-remote-interface Wiki — вики с набором полезных рецептов.
  • Начало работы с Headless Chrome.
  • crmux — мультиплексор для протокола, позволяющий установить несколько подключений инструментов разработчика к одной вкладке.
  • automated-chrome-profiling —  автоматизация JavaScript-профилирования в Chrome с помощью Node.js.
  • chrome-devtools-frontend — клиентская часть инструментов разработчика Chrome.
  • chrome-timeline-model — npm-пакет для обработки результатов профилирования.
  • headless-devtools — позволяет совершать из кода действия, доступные в инструментах разработчика. Использует Headless Chrome и Puppeteer.
  • sloth — расширение Chrome, позволяющее включить троттлинг процессора и сети для выбранных вкладок.
  • crconsole — консоль и отладчик Chrome в терминале.

Консоль и отладчик Chrome в терминале

Адаптеры браузеров

  • Remote Debug Firefox adapter — переводит протокол Firefox в протокол Chrome.
  • ios-webkit-debug-proxy — прокси протокола Chrome для iOS-устройств.
  • Remote Debug iOS WebKit adapter — основан на предыдущем проекте, переводит API протокола WebKit в протокол Chrome.
  • IE Diagnostics Adapter — адаптер для протокола Microsoft IE 10/11.
  • Edge Diagnostics Adaptor — адаптер протокола, который позволяет использовать инструменты для отладки Edge, используя протокол Chrome.

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

  • Facebook Stetho — отладка Android с помощью инструментов разработчика Chrome.
  • Dirac — отладка ClojsureScript.
  • Mare — отладка Lua.
  • PonyDebugger — удалённая отладка нативных iOS-приложений.
  • go-debugger-devtools — отладка Go.
  • Debugging Node.js with Chrome DevTools — гайд по использованию полной поддержки отладки и профилирования в Node v6.3+.
  • devtool — отладка и профилирование Node.js-приложений с помощью инструментов разработчика и Electron.
  • buggerJS — использование возможностей инструментов разработчика в Node.

Расширения инструментов разработчика

Доступность для всех

  • Chromelens — посмотрите, как ваше приложение увидят люди с проблемами со зрением и как у вас обстоят дела с навигацией для слепых.

Рабочий процесс

  • Clockwork — просмотр данных профилирования PHP-приложения.
  • Emulated Device Lab — тестирование сразу на нескольких эмулированных устройствах.
  • RailsPanel — просмотр данных профилирования приложения на Ruby on Rails.
  • React Developer Tools — просмотр иерархий компонентов React.
  • EmberJS Inspector — позволяет просматривать объекты EmberJS.
  • VueJS Developer Tools — просмотр компонентов VueJS и управление их данными.
  • Angular Batarang — просмотр области видимости Angular-приложения и профилирование его данных.
  • Augury — отладка и профилирование приложений на Angular 2.
  • Marionette Inspector — просмотр отображений, событий и данных приложения на Marionette.
  • Backbone Debugger — просмотр отображений, событий и моделей приложения на Backbone.
  • App Inspector for Sencha — просмотр дерева компонентов, хранилищ данных, событий и разметки приложений на Sencha ExtJS/Touch.
  • Redux Devtools — инструменты разработчика для отслеживания изменения состояний приложения.
  • Three.js — редактирование проектов на three.js.
  • Insight — расширение для WebGL-разработки.
  • Metal.js Developer Tools — просмотр иерархии компонентов Metal.

UX

  • DevTools Author — подборка тем для кастомизации инструментов разработчика.
  • Zero Dark Matrix — тёмная тема для инструментов разработчика.

Производительность

Смотрите также: Удобные возможности консоли разработчика Chrome, о которых вы можете не знать

На основе Awesome chrome-devtools