Инструменты разработчика Chrome Devtools для вебмастеров и дизайнеров

Современные браузеры перестали быть просто инструментами для поиска информации в Интернете. Разработчики дополняют свое детище новыми возможностями, дабы повысить комфорт пользователей, прорекламировать платформу. Сегодня мы поговорим о том, как включить режим разработчика Google Chrome. Также в процессе повествования рассмотрим несколько интересных фишек при работе с консолью и отладчиком.

Подробности

Для начала давайте проговорим, кому и для чего может понадобиться сей инструмент:

• разработчикам расширений, верстальщикам сайтов;
• людям, изучающим HTML и CSS;
• тестерам готового продукта.

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

Для активации особого режима работы достаточно:

1. Запустить Google Chrome и кликнуть ЛКМ по главной кнопке в правом верхнем углу экрана.
2. В системном меню навести курсор на «Дополнительные инструменты».
3. Затем выбрать пункт «Инструменты разработчика».

После этого правую половину пользовательского интерфейса займет окно со множеством вкладок, гигатоннами кода и элементов верстки.

Как говорилось выше, для активации особого режима достаточно использовать волшебное сочетание клавиш <keybtn>Ctrl</keybtn> +<keybtn>Shift</keybtn> + <keybtn>I</keybtn>.

Дополнение

Есть несколько хитростей при работе с инструментами разработчика, которые упростят для вас освоение функционала, ускорят рабочий процесс.

Список представлен ниже:

• Поиск в исходном коде – сочетание клавиш <keybtn>Ctrl</keybtn> + <keybtn>Shift</keybtn> + <keybtn>F</keybtn> активирует миниатюрную поисковую строку, использование которой упрощает нахождение регулярных выражений или однотипных команд.
• Пара кареток и выделений – теперь можно работать на нескольких строках одновременно. Достаточно зажать Ctrl, выделить нужные поля, и приступать к работе.
• Переход к строке – после открытия файла во вкладке Sources зажимай <keybtn>Ctrl</keybtn> + <keybtn>G</keybtn>, после чего вводим номер строки (мгновенный переход обеспечен).
• «Прическа» для минимизированных исходников – в режиме разработчика есть кнопка (левый нижний угол), которая автоматически «трансформируют» сокращенные исходники в удобочитаемую форму.
• Режим устройства – это отличная возможность проверить адаптивность разработанного сайта на разных платформах. Также присутствует эмуляция сенсорного касания к дисплею.

Это далеко не полный перечень возможностей инструмента, но и они дают понять, насколько в Google заморочились ради пользователей.

Подведем итоги

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

Chrome – один из популярнейших браузеров на текущий момент. Он предоставляет удобную среду для разработчиком с множеством полезных функций. Google Chrome DevTools – официальный инструмент, который позволяет получить разработчикам более полный доступ к браузеру и приложению.

Особенности DevTools

Здесь вы фактически можете тестировать отображение сайта на различных устройствах, редактировать HTML и CSS на лету, замерять производительность отдельных участков, дебажить JavaScript.

Также для работы с отдельными фишками возможно вы захотите использовать Google Chrome Canary – эксперементальную версию Chrome. Данная версия может быть легко запущена рядом с обычным Chrome.

Для использования и эксперемента с отдельными инструментами разработчика вам понадобится в адресной строке браузера ввести

chrome://flags

и выбрать весь необходимый инструментарий.

С полным набором возможностей вы можете ознакомится на официальном сайте.

Как открыть инструмент разработчика?

Для этого можно воспользоваться одним из вариантов:

1. Через меню браузера

Войдите в меню, кликнув по иконке , кликните на  “More tools” и выберите “Developer Tools.”

1. Через нажатие правой кнопки мыши

Нажмите на любом элементе страницы правой кнопкой мыши и выберите “Inspect element”.

1. С помощью горячих клавиш

Нажмите сочетание клавиш в зависимости от вашей операционной среды

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

Советы и приёмы для работы с инструментами разработчика.

Здесь приведены лишь некоторые возможности из множества доступных. Для некоторых из них используется Canary.

Быстрый переход по файлам.

В открытой вкладке с исходными файлами нажмите сочетание Ctrl + P (Cmd + P) и ищите необходимые файлы.

Форматирование с помощью {}

Нажав на {} вы можете изменить форматирование исходного кода и вернуться к нормальному виду.

Редактирование HTML – элемента

Вы можете на лету редактировать HTML выбирая любом элемент внутри DOM и дважны кликнув на него. Закрывающиеся тэги будут автоматически отредактированы. Все изменения будут сразу же отображены.

Редактирование CSS – свойств

Аналогично как и HTML, точно так же вы можете редактировать и CSS.

Поиск в исходном коде

Вы можете быстро производить поиск в исходном коде с помощью комбинации Ctrl + Shift + F (Cmd + Opt + F), а также производить поиск по css – селектору нажав Ctrl + F (Cmd + F).

Точки останова в Javascript Breakpoints

При дебаге Javascript часто бывает полезным использовать точки останова. В  инструменте разработчика вы можете выбрать номер строки, где хотите остановиться и нажать Ctrl + R (Cmd + R) для перезагрузки страницы. Именно в этом месте и прервётс загрузка.

Переход по номеру строки

Нажав Ctrl + O (Cmd + O) и использовав специальный синтаксис, вы можете быстро перейти на нужную строку. В примере введено :200:10, это значит, что переход прошёл на строку 200 и колонку 10.

Множество курсоров

Если вам надо одновременно вводить значения в нескольких местах или редактировать тот же font-size, то нажав Ctrl + Click (Cmd + Click) можно одновременно вводить информацию в нескольких местах.

Изменение положения окна

Окно DevTools имеет три положения: с одной из сторон, внизу и плавающее. Вы можете переключаться между ними с помощью Ctrl + Shift + D (Cmd + Shift + D) или через специальное меню в правом верхнем углу окна.

Очистка куки

Для работы со стороними плагинами иногда бывает необходимым очистить cookies. На вкладке “Resources” вы можете найти необходимы куки и удалить их через контекстное меню.

Проверка на различных устройствах

Если у вас адаптивный дизайн, то вы можете проверить своё приложение на различных устройствах. С помощью этого режима вы сможете проверить наличие проблем с вёрсткой на мобильных устройствах или при различных размерах браузера. Для входа в этот режим нажмите на или комбинацию клавиш Ctrl + Shift + M (Cmd + Shift + M). Там вы сможете выбрать нужное устройство, ориентацию экрана и его размер.

Цветовая паллета и пипетка

Нажав в css – стилях на нужный цвет в разметке вы сразу попадёте в цветовую паллету, где для любого элемента сможете выбрать более подходящий под ваш дизайн цвет. С помощью пипетки можно быстро посмотреть цвет любого элемента на странице.

Смена формата цвета

Можно переключаться между различными отображениями цветов: RGBA, HSL и шестандцатиричным. Нажатие Shift + Click на блоке с цветом поменяет формат.

Эмуляция сенсорного экрана

Классная фича DevTools помогает симулировать тачскрин и акселерометр. Для этого перейдите по пути “Console -> Emulation -> Sensors”.

Переключение между состояниями элемента

Часто необходимо проверить скрытый стиль, например, :hover атрибут. В Firefox местная среда разработки позволяет проверить его непосредственно, когда он вызван. Но в Chrome всё иначе. Здесь есть штука под названием “toggle element state”. Она позволяет посмотреть свойства аттрибута непосредственно в панели стилей.

Сохранение изображение как Data URI (base64 кодировка)

Можно сохранить изображение со страницы как Data URI или сконвертировать в base64. При этом не нужно использовать какие-либо сторонние сервисы. Для этого перейдите во вкладку “Network”, выберите нужное изображение, кликните правой кнопкой мыши по нему и нажмите на “Copy image as Data URL”.

Просмотр User Agent Shadow DOM

Когда вы работаете с контролами типа кнопки или строки ввода, браузер автоматически добавляет скрытые атрибуты. Чтобы их увидеть нажмите F1 (?) и выберите “Show user agent DOM”. Как показано на примере, в нашем DOM – дереве появился скрытый атрибут #shadow-root div. Теперь, при необходимости можно повесить на него какие-нибудь CSS – стили.

Выбор следующего вхождения

Когда вам надо поменять одно и то же свойство для нескольких элементов, то инструмент разработчика может ускорить этот процесс. Сделайте двойной клик на нужном свойстве, с помощью Ctrl + D (Cmd + D) пометьте все необходимы вхождения. Теперь меняя значение в одном месте, оно меняется одновременно и в остальных выбранных местах.

Рабочее окружение

По умолчанию когда вы что-то меняте в инструменте разработчика, то при перезагрузки страницы всё пропадает. С помощью рабочего окружения можно необходимые изменения сохранить на диск. Правой кнопкой мыши нажмите на папку и в меню нажмите на “Add folder to local workspace”, далее сделайте тоже самое для нужного файла, но в меню жмите на “Map to file system resource…”.

Диафильм прогрузки

Нельзя обойти стороной классную возможность создания диафильма из состояний при прогрузке вашего сайта. Чтобы проверить как рендориться ваш сайт в течении каждого этапа его прогрузки зайдите в панель “Network”, нажмите на картинку с камерой и потом нажмите Ctrl + R (Cmd + R), чтобы перезагрузить страницу. В итоге вы получите скриншоты загрузки вашей страницы в каждый момент времени.

Время загрузки DOM

Chrome DevTools позволяют проверить скорость загрузки DOM – структуры и общую скорость загрузки страницы. Для этого идём во вкладку “Network”, кликаем на “Show Overview” и жмём Ctrl + R (Cmd + R) для перезагрузки страницы. Синяя линия показывает время загрузки DOM – структуры, а красная – общее время. Всё что слева и на синей линии – это блокеры для загрузки DOM и являются причиной медленного рендеринга страницы.

Профили для скорости сети

Для тестирования загрузки приложения по мобильной сети или в условиях лимитированной скорости Интернета есть возможность создать специальный профиль, в котором будет указана нужная скорость загрузки. Для этого переходим в нисподающее меню “Throttling” на вкладке “Network” и кликаем на “Add a custom profile…” для создания своего профиля или выбираем один из предложенных.

Панель безопасности

С её помощью можно протестировать миграцию на HTTPS и быстро исправить возможные предупреждения. Идём в “Security” панель и жмём Ctrl + R (Cmd + R). Зелёным цветом будут помечены безопасные скрипты и красным вызывающие подозрение.

Валидация Google AMP HTML

Google Accelerated Mobile Pages (AMP) – опенсорсный проект для увеличения скорости загрузки приложения на мобильном устройстве за счёт использования легковесных HTML страниц. Чтобы  Google проиндексировал AMP версию ваше страницы вы должны её провалидировать. Для этого кликните на панеле “Console”, далее необходимо добавить #development=1 к AMP версии в адрессной строке браузера. Жмём Ctrl + R (Cmd + R) для перезагрузки. В случае успешной валидации мы увидим нотификашку. Дальше можно более подробно прочитать ошибки при AMP валидации.

Использование инструментов разработчика из Firefox в Google Chrome

Если вдруг так случилось, что вам понадобился инструмент разработчика из Firefox, то можете попробовать Valence – эксперементальный плагин от команды Firefox. Он предназначен для дебага в различных браузерах. Требуется 37 версия хрома и выше.

Например, в OSX вы с помощью следующей команды можете запустить версию Chrome для дебага

Как только соединение установлено, вы можете открыть Firefox WebIDE, выбрать “Chrome Desktop” и тем самым получить доступ Firefox Developer Tools из Chrome.

Итоги

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

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

• https://chromeum.ru/faq/developer-mode-in-google-chrome
• https://qaat.ru/nekotorye-vozmozhnosti-instrumenta-razrabotchika-v-chrome/
• https://tproger.ru/translations/chrome-devtools/