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

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

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

• Обучение
• Инструменты разработчика как IDE
• Инструменты и экосистема
• Протокол инструментов разработчика 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

• Sublime Web Inspector — отладка JavaScript прямо в Sublime Text.
• WebStorm & JetBrains Chrome Extension — позволяет WebStorm отлаживать JavaScript, просматривать дерево DOM и редактировать HTML, CSS и JS на лету.

Протокол 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 React Perf — интерфейс для пакета react-addons-perf.

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