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

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

В последнем релизе в devtools отключили запрет на переопределение констант. Точнее — const работают как и прежде, но только в рамках одной REPL.

Если запускаешь код в пределах одной команды — принцип работы const не изменился

Grid — редактор

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

Для Flexbox-ов есть точно такая же фича

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

Всё элементарно — devtools позволяет сделать скриншот отдельно взятого DOM элемента. Фантастически удобно, когда надо сделать скрин какой-то определённой части сайта — например, сайдбара.

ПКМ, Capture node screenshot
Пример результата

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

Достаточно в контекстном меню выбрать Copy all declarations!

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

Многие дебажат js посредством вызовов console.log в нужных местах. Что не очень удобно для этого есть debugger,который позволяет смотреть состояние всех переменных в реальном времени.

ключевое слово — debugger

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

x, i — обе переменные видны

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

Снизу нажимаем троеточие, там выбираем network conditions — тогда появится такой таб

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

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

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

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

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

Выбираем Force enabled, и перезагружаем страницу

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

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

Слева без group, справа c
Прокрутить вверх