Google Chrome для разработчиков

На основе Awesome 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

• 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, о которых вы можете не знать

Мало кому известно, что у браузера Гугл Хром существует несколько версий, созданных для различных категорий пользователей. Одна из них называется Google Chrome Developer Edition. Что это за версия такая и зачем она нужна? Об этом и пойдет речь в данном материале.

Подробности

Стоит отметить, что альтернативные сборки Хрома появились уже давно. Они сопровождают сей популярный браузер почти со стартовой версии. Но далеко не всем пользователям подходят альтернативные варианты.

Дело в том, что «другие» сборки Хрома предназначаются для профессионалов в той или иной области: верстальщиков, тестировщиков, разработчиков и так далее. Обычным юзерам такие браузеры не подойдут. И тем не менее, нужно рассказать о них.

Какие вообще версии Chrome бывают?

На самом деле, их не так уж и много. Однако стабильная из них всего одна. Это как раз та, которая выкладывается в свободный доступ. Скачать ее может любой пользователь. Но есть и альтернативные версии. Давайте тезисно их рассмотрим.

• Chromium. Это даже не совсем Гугл Хром. Это версия браузера без поддержки магазина приложений, тем и прочих «фишек», к которым так привык пользователь. Но есть и преимущество. В Хромиуме начисто выпилены компоненты телеметрии, обеспечивающие слежку за пользователем. По сути, эта версия – своеобразный конструктор, из которого каждый может собрать себе идеальный браузер.
• Canary. Или как ее чаще всего называют – канарейка. Эта версия предназначена для тестирования всех новшеств, добавляемых Гугл в веб-обозреватель. Сначала новые элементы проходят обкатку в Canary, а потом их добавляют в стабильную ветку. Сама канарейка стабильностью не отличается и регулярно падает. Поэтому обычному пользователю для нормальной работы она не подойдет.
• Dev. Или Developer Edition. Версия для разработчиков. Она выходит после нескольких версий Canary и совмещает в себе новые фишки с инструментарием для разработки. Обновляется иррегулярно. С завидным постоянством падает. Очень любит стирать пользовательские данные при падении. Для обычных юзеров никак не подходит.
• Beta. Название говорит само за себя. Данную версию выпускают специально для тестирования. Ее могут установить себе практически все. Но не ждите какой-то стабильности или высокой скорости работы. Обычно беты не отличаются такими характеристиками. Зато можно первым протестировать все новые фишки.
• Stable. А вот это – та версия, которую устанавливают себе все. Здесь все доведено до ума, новые возможности оптимизированы, работает браузер стабильно и не падает раз в 10 минут. Однако обновления приходится ждать очень долго. Зато есть вероятность, что в процессе работы ваши данные вдруг не исчезнут.

Вот такие версии всеми любимого Гугл Хрома существуют. Однако в данном контексте нам интересна именно Developer Edition. Поэтому нужно рассмотреть все ключевые особенности данной версии подробнее. Только тогда можно сделать заключение.

Особенности Developer Edition

Ключевой особенностью данной версии Google Chrome является наличие инструментов для разработки. Они пригодятся тем, кто разрабатывает расширения и плагины для этого веб-обозревателя. Обычный пользователь в таких инструментах потеряется.

Второй особенностью является продвинутая консоль. Она служит для правки кода и включения скрытых функций браузера. Однако с ней нужно уметь работать. Малейшая ошибка в команде может привести к весьма печальным последствиям.

Еще одна «фишка» — наличие всех последних новшеств, которые перекочевали в данную версию из Canary. Благодаря этому разработчики могут оптимизировать свои расширения под новые возможности веб-обозревателя.

Частые обновления – еще одна отличительная черта Developer Edition. Они приходят иррегулярно, но не позднее, чем раз в две недели. В некоторых случаях обновления могут приходить уже через два дня. Это удобно для тех, кто тестирует новые возможности веб-обозревателя.

Заключение

Итак, выше мы поговорили о том, какие бывают версии Google Chrome и подробно остановились на сборке для разработчиков. Теперь понятно, что эта версия отличается набором инструментов и продвинутой консолью.

Стоит отметить, что обычным пользователям вовсе не нужно устанавливать Developer Edition. Толку от этого не будет никакого. Тем более, что особой стабильностью эта сборка не отличается. Если вы не разработчик, то лучше использовать Stable.

Используемые источники:

• https://tproger.ru/translations/chrome-devtools/
• https://chromeum.ru/faq/google-chrome-for-web-developers