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, которая группирует свойства по категориям - внешний вид, разметка, и т. д. Очень удобно, когда свойств дохрена. Хотя если нужно найти определённое, то быстрее всего будет использование фильтра
