Всем привет!

Пока из каждого утюга рассказывают о различных ИИ-инструментах, агентах и прочих радостях упрощающих жизнь, я хочу рассказать о 11 незаслуженно потерянных фичах в недрах Chrome Devtools. Про фишки ИИ в DevTools рассказывать не вижу смысла, так как в нашем регионе они пока не работают.

Кстати, первая часть тут - тык.

Погнали!

1. Продвинутый профайлинг в Perfomance

Фишка, которая работает в купе с модным Performance Extensibility API, которое позволяет делать кастомные метки на таймлайне в вкладке Perfomance с помощью perfomance.mark()

В том числе, эта апишка позволяет создавать целые кастомные дорожки с помощью perfomance.measure() и одного или двух perfomance.mark(). Несколько кастомных дорожек можно объединить в группу с помощью trackGroup. Очень удобная фича при разработке в большой команде, с разными зонами ответственности.

Для активации функции нужно активировать галочку в Perfomance -> Show custom tracks.

2. Имитация медленного устройства, с помощью CPU Throttling

Есть фишка, которая позволяет замедлять качество соединения, настраивать пинг, потери пакетов и так далее, но иногда бывает необходимо проверить - как будет работать ваше приложение на слабом железе, к примеру, на недорогом телефоне. Ведь те результаты, которые модные программисты намеряли на мощных макбуках, могут совсем не соответствовать действительности. И вот в этот момент на помощь приходит CPU Throttling.

Активировать его можно в Perfomance -> Settings -> CPU, там есть пара стандартных пресетов, но при этом можно сделать Calibrate и получить значения для Low-tier и Mid-tier мобильных девайсов. Более подробно про калибровку и практику тестирования с помощью этой фичи, можно почитать тут.

3. Мониторинг ресурсов приложения и FPS в реальном времени

Иногда кажется, что сайт подтормаживает, жрет ресурсы и FPS неприлично мал, но как правило это все на уровне ощущений. Однако, это можно проверить с помощью DevTools и показать эт�� поддержке/разработчикам продукта. Сделать это просто: активируем Perfomance Monitor и FPS meter и наслаждаемся.

Как включить Perfomance Monitor и FPS meter:

1. Открыть DevTools.

2. Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux).

3. Написать "Show Perfomance Monitor"/"Show frames per second (FPS) meter".

4. Наслаждаться дебагом.

На самом деле вкладка Perfomance умеет гораздо больше, чем мы видим и умеет очень много всего, подробнее можно почитать тут - тык1, тык2, тык3.

Сайтик, где можно потыкать и посмотреть как работает Perfomance Monitor и FPS meter - тык.

4. Пару фишек из Rendering

Для начала нужно открыть вкладку Rendering:

1. Открыть DevTools.

2. Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux).

3. Написать "Show Rendering".

Paint Flashing

После включения этой опции каждая перерисовка подсвечивается зелёным цветом.

Layout shift regions

Эта фишка будет полезна, если нужно отдебажить "Сдвиги лейаута" (CLS), после включения этой функции все сдвиги будут подсвечиваться синим цветом.

На самом деле в этом разделе DevTools еще много интересного связанного с поведением страницы: все возможные комбинации для эмуляции проблем с цветовосприятием, всякие фишки для работы с темной/светлой темой - тык, тык2; возможность подсветить рекламу (Highlight ad frames); возможность посмотреть проблемы с производительностью при скролле (Scrolling perfomance issues).

5. CanIUse прямо в DevTools

В Chrome с версии 140 появилась такая приятная фича, как просмотр поддерживаемости CSS-свойств при наведении на свойство. Работает это великолепие на основе Baseline и отображает, насколько распространено это свойство или пока это экспериментальная фича (подробнее можно посмотреть провалившись по ссылке в статье на mdn).

При наведении на CSS-свойство отображается базовое описание того, что делает свойство, его поддержка среди браузеров в формате: поддерживается/поддерживается ограниченно, и ссылка на статью mdn о свойстве.

6. Стилизация ::placeholder, ползунков в range-input, через styles

По умолчанию, Chrome Devtools не отображает стили для ::placeholder и подобных псевдоэлементов, однако достаточно включить настройку Show user agent shadow DOM и Chrome позволяет просматривать и стилизовать подобные элементы прямо через секцию Styles в инспекторе.

7. Сохранение логов при навигации

Иногда необходимо видеть логи в консоли при навигации между разными страницами или при переходе между разными доменами и дл�� этого есть удобная функция у Console -> Settings -> Preserve Log.

8. Различные виды скриншотов

В DevTools есть встроенная скриншотилка, и она умеет делать скриншоты определённой области, всей страницы (включая прокрутку, получается большой и длинный скриншот), выбранной ноды.

Как включить:

1. Открыть DevTools.

2. Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux).

3. Написать "Screenshot".

4. Выбрать нужный вид скриншота.

9. Мок запросов в Network

Иногда случается так, что нужно протестировать: "а что будет, если запрос вернёт определённые данные", но при этом под рукой нет доступа к бэкенду/фронтенду или это просто долго. В таком случае можно воспользоваться фичей мока заголовков и контента во вкладке Network.

Заголовки с помощью Override headers можно отредактировать inline прямо в самом запросе, а вот при клике на Override content перекидывает в Source-вкладку, и там таб со всеми Overrides. Там можно подложить данные, которые нужны, сохранить, и в дальнейшем этот запрос будет возвращать эти данные и эти заголовки. Около иконки запроса будет фиолетовый кружок, обозначающий, что он перезаписан.

10. Webauthn

Chrome DevTools позволяет эмулировать различные виды аутентификаторов (USB, BLE, NFC) всего в несколько кликов. Если вдруг вам будет необходимо протестировать аутентификацию на вашем сайте, базово можно использовать эту эмуляцию, а потом уже искать физические устройства для проверки.

Как включить:

1. Открыть DevTools.

2. Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux).

3. Написать "Show Webauthn".

4. активировать "Enable virtual authenticator environment"

11. Кастомный user-agent

Частая проблема, что пользователь приходит с каким-то непонятным user-agent, невероятного браузера типо BlackBerry или чего-нибудь более экзотического. И в этот момент как раз может пригодиться эта фича — она позволяет подменять user-agent на кастомный или из выбранных пресетов и тестировать с ними ваше приложение. Это позволяет не ставить себе различные расширения или не качать эти экзотические браузеры.

Как включить:

1. Открыть DevTools.

2. Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux).

3. Написать "Show Network conditions".

4. В User agent снять галочку "Use browser default"

Итого

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

Если у вас есть какие-то интересные фишки, которые вы юзаете - пишите в комментариях, всем будет полезно!

Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.