Не очень известные возможности Chrome Devtools

Chrome Devtools, безусловно, мощнейший инструмент для разработки, дебага, профайлинга и тестирования в браузере. С каждым релизом в него завозят всё новые и новые фичи. И время от времени на хабре выходят посты типа «10 крутых фишек Devtools». Но факт — то ли копирайтовый мир победил, то ли это не слишком интересная тема, но в большинстве случаев авторы описывают одни и те же возможности, которые существуют уже года 4. Мне кажется только ленивый сейчас не знает о console.time, о манипуляциях с анимациями, и о том что ветки DOM-дерева можно drag&drop-ать, и т. д.

Поэтому, позвольте же рассказать, какие интересные фичи знаю я. Вряд ли все они станут откровением, но знают о них точно не все.

Переопределение const

Те кто любят экспериментировать (или просто тестить всякую ерунду) в консоли devtools, наверняка сталкивались с проблемой — накидываешь код который использует const, тестишь — что-то не то. Правишь, enter — а const уже был определён, ошибка. Приходится перезагружать страницу, неудобно. Поэтому в последнем релизе в devtools отключили запрет на переопределение констант. Точнее — const работают как и прежде, но только в рамках одной REPL. Думаю, со скрином будет понятнее

Grid — редактор

При работе с гридами, на элементе с display: grid; появляется бейджик, с надписью grid. Кликаем по нему — видим визуализацию нашей грид-разметки, её рамки, размеры, и т. д. Очень облегчает понимание происходящего.

Скриншот DOM-узла

Когда я узнал о этой фишке — первой моей мыслью было «чёрт, как я жил без этого раньше?!». Всё элементарно — devtools позволяет сделать скриншот отдельно взятого DOM элемента. Фантастически удобно, когда надо сделать скрин какой-то определённой части сайта — например, сайдбара.

Удобное копирование CSS свойств

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

Оказывается — всё давно уже придумано, достаточно в контекстном меню выбрать Copy all declarations!

Просмотр стейта JS кода без console.log-ов

Многие (я в том числе) дебажат js посредством вызовов console.log в нужных местах. При этом я слышал что есть какой-то debugger, и даже ставил его ради интереса — но изначально особо смысла не уловил. Оказывается же, это мощнейшая фича, которая позволяет смотреть состояние всех переменных в реальном времени. Покажу на примере

Теперь, при выполнении этого кода, когда интерпретатор дойдёт до debugger — выполнение остановится и автоматически откроется devtools с участком кода где произошла остановка. А справа, во вкладке scope, мы можем видеть все переменные в области видимости где установлен debugger, причём со всеми значениями.

Манипуляции с юзер-агентом

Когда-то мне было нужно изменять юзер-агент для тестирования, тогда я ставил какое-то стороннее расширение на хром. Сейчас же всё можно делать не выходя из дому из девтулзов.

Брекпоинты по изменению DOM-дерева

Совершенно лютая вещь, как по мне. Особенно когда надо найти что-то в диком легаси коде, где какая-то jQuery лапша что-то там меняет на фронте.

Теперь если какой-то код сделает изменения в любом элементе дерева — произойдёт эффект аналогичный с вызовом debugger. Точнее — остановка выполнения, и демонстрация участка кода который затриггерил дебаггер.

Как видно, брекпоинты можно навешивать на три вида событий — на любое изменение, на изменение атрибутов. или на удаление узла из дерева.

Эмуляция сенсорных касаний

При разработке чего-нибудь мобильного, нужно убедиться в том, что touch-events будут отрабатывать правильно. Это ведь на ПК у нас есть курсор, а на мобильных устройствах — сенсорный дисплей. Devtools умеет принудительно включать режим эмуляции тач-скрина, даже без перехода в мобильный режим представления

Группировка CSS свойств

Надеюсь, вкладка computed ни для кого не секрет. А вот секретом может быть опция group, которая группирует свойства по категориям — внешний вид, разметка, и т. д. Очень удобно, когда свойств дохрена. Хотя если нужно найти определённое, то быстрее всего будет использование фильтра