Андрей Смирнов
Время чтения: ~13 мин.
Просмотров: 12

Двенадцать полезных Chrome DevTools Tips

На основе 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 и совмещает в себе новые фишки с инструментарием для разработки. Обновляется иррегулярно. С завидным постоянством падает. Очень любит стирать пользовательские данные при падении. Для обычных юзеров никак не подходит.Obshhij-vid-Google-Chrome-dlya-razrabotchikov.png
  • Beta. Название говорит само за себя. Данную версию выпускают специально для тестирования. Ее могут установить себе практически все. Но не ждите какой-то стабильности или высокой скорости работы. Обычно беты не отличаются такими характеристиками. Зато можно первым протестировать все новые фишки.
  • Stable. А вот это – та версия, которую устанавливают себе все. Здесь все доведено до ума, новые возможности оптимизированы, работает браузер стабильно и не падает раз в 10 минут. Однако обновления приходится ждать очень долго. Зато есть вероятность, что в процессе работы ваши данные вдруг не исчезнут.

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

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

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

Второй особенностью является продвинутая консоль. Она служит для правки кода и включения скрытых функций браузера. Однако с ней нужно уметь работать. Малейшая ошибка в команде может привести к весьма печальным последствиям.Informatsiya-o-brauzere-Google-Chrome-dlya-razrabotchikov.png

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

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

Заключение

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

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

Автор оригинала: David Gilbertson
  • Перевод
В данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь. Некоторые из DevTools функций вы возможно не знали. Я буду очень счастлив, если хотя бы одну из них вы найдете для себя полезной. (В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.) Итак, поехали:

Копируем переменную в буфер обмена

Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

copy (someVariable)

Теперь текстовое представление переменной скопировано в буфер обмена.

1. Инспектируем анимацию

Анимации прекрасны. Они радуют пользователей, и что более важно, они радуют меня. Меню анимаций в DevTools позволит вам замедлить все анимации на странице до 25% или до 10% (увидеть мир глазами кролика), или подвигать конкретную анимацию.

2. Удобные скриншоты

Когда вы находитесь в режиме эмуляции устройств, вы можете включить device frame и когда вы нажмете на capture screenshot то получите снимок экрана вместе с рамкой устройства.

0dab90ca370b4fe98ccb8ef2dc931000.png

Полученное изображение будет выглядеть примерно так:

5558ef0e86f2443a95ed42a2e78db47b.png

3. $0 в консоли

Напечатав $0 в консоли, вы получите ссылку на текущую выделенную в панели элементов DOM ноду. Это реальная ссылка на элемент, и как пример, вы можете сделать $0.classList.add(‘touch-of’) или $0.getBoundingClientRect() чтобы узнать размер, или если вы используете jQuery на странице, вы можете напечатать что-то такое $($0).data() чтобы получить данные элемента. По умолчанию Chrome просто покажет вам объект в виде DOM элемента. Если вы хотите увидеть элемент как JavaScript объект, можете напечатать console.dir($0) Вот разница:

d5efb4235b154626b2afd1b197a3ac68.png

Если вы достаточно круты, и используете React и React dev tools, то $r покажет вам ссылку на react компонент. Чтобы увидеть proprs компонента, просто введите $r.props.

9d69751600524b55ae3c947d6f0fd9fb.png

Бонус: вы можете ввести ID элемента в консоли и также получить ссылку на элемент, хотя он и не является реальной глобальной переменной.

4. Стрелочные функции в консоли

Это не совсем DevTools Tip, но я уверен что вы их полюбите. С появлением стрелочных функций стало удобно использовать их в одной строке. Например выражение performance.getEntries().filter(entry => entry.name.includes(‘static’)) выведет некоторую информацию о моих запросах с доменов содержащих “static” в имени. Конечно, если вам нужно написать более одной строки, вы можете нажать shift+enter чтобы перейти на новую строку без выполнения кода.

5. Поиск по селектору

Поле поиска в панели элементов ищет не только текст (вот это поворот, что же еще он оно ищет?!), но и совпадающие селекторы. Это может быть особенно удобно для не-веб-разработчиков, которым нужно подобрать селекторы, например, для автотестов. Здесь я ищу совпадения по .section-inner p:nth-of-type(2)

82fb976f646f45edaa417a0dd9fbc2b3.png

6. Экспериментируем с цветами

Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design.

7. Просмотр отрендеренных шрифтов

Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.

089d6905b7694f759b8a1e17782663d1.png

8. Редактируем любой текст на странице

Если у вас есть меню фиксированной ширины и вы хотите узнать, насколько длинный текст туда поместится и увидеть переносы слов. Переключите документ в режим дизайна! (document.designMode = ‘on’) После этого вы сможете редактировать все элементы имеющие текстовый контент. Если вы тот человек, который решил использовать on/off вместо true/false, я бы хотел поговорить с вами в моем офисе.

9. Диафильм

Очень хорошим инструментом настройки производительности является режим диафильма на вкладке Network. Он позволит вам сосредоточить внимание на визуальной составляющей а не на неясных событиях вроде domContentLoaded. Или вы можете просто с иронией посмотреть как грузятся шрифты на странице Adobe. Я смотрю на это каждый раз, когда мне грустно. Моя любимая часть, когда весь текст исчезает.

10. Фильтры на вкладке Network

Какую бы работу по производительности вы не делали, вам нужно знать что приходит к вам в браузер. Если вы размещаете рекламу на сайте, то приходит много чего. Для сокращения списка, вы можете отфильтровать ресурсы по типам (удерживайте cmd/ctrl для мультивыбора) и также по доменам.

11. Темная тема

Потому что темная тема.

81f9c50ad37d46bca199393aace43917.png

Включить можно вначале страницы настроек

12. Chrome сниппеты

Я люблю сниппеты. (жаль, что они не синхронизируются между браузерами с другими моими Chrome настройками).

a26cf7920d73413ca93ef94a9fa995b4.png

Круто что они выполняются в контексте страницы. В отношении доступа к DOM, относительным ссылкам, кукам, и другим вещам, ваши сниппеты будут иметь такое же поведение как и обычный код. …

Конец

Узнать больше информации о возможностях панели разработчика вы можете посетив документацию. Не пожалейте немного времени для ее изучения, чтобы повысить эффективность своей работы. Поделится своими полезными находками можно в комментариях. … И еще одно. При установке Chrome Canary, войдите и синхронизируйте ваш Google аккаунт, но в дополнительных настройках синхронизации уберите галочку с “Extensions”. Так вы получите вашу историю, закладки и все остальные вещи, кроме расширений, которые засоряют ваше рабочее пространство своим кодом.

28212827766449b2bc293c0ef3ef8781.png
Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации