Переопределение const
В последнем релизе в devtools отключили запрет на переопределение констант. Точнее — const работают как и прежде, но только в рамках одной REPL.
Grid — редактор
При работе с гридами, на элементе с display: grid; появляется бейджик, с надписью grid. Кликаем по нему — видим визуализацию нашей грид-разметки, её рамки, размеры, и т. д. Очень облегчает понимание происходящего.
Скриншот DOM-узла
Всё элементарно — devtools позволяет сделать скриншот отдельно взятого DOM элемента. Фантастически удобно, когда надо сделать скрин какой-то определённой части сайта — например, сайдбара.
Удобное копирование CSS свойств
Достаточно в контекстном меню выбрать Copy all declarations!
Просмотр стейта JS кода без console.log-ов
Многие дебажат js посредством вызовов console.log в нужных местах. Что не очень удобно для этого есть debugger,который позволяет смотреть состояние всех переменных в реальном времени.
Теперь, при выполнении этого кода, когда интерпретатор дойдёт до debugger — выполнение остановится и автоматически откроется devtools с участком кода где произошла остановка. А справа, во вкладке scope, мы можем видеть все переменные в области видимости где установлен debugger, причём со всеми значениями.
Манипуляции с юзер-агентом
Брекпоинты по изменению DOM-дерева
Теперь если какой-то код сделает изменения в любом элементе дерева — произойдёт эффект аналогичный с вызовом debugger. Точнее — остановка выполнения, и демонстрация участка кода который затриггерил дебаггер.
Как видно, брекпоинты можно навешивать на три вида событий — на любое изменение, на изменение атрибутов. или на удаление узла из дерева.
Эмуляция сенсорных касаний
При разработке чего-нибудь мобильного, нужно убедиться в том, что touch-events будут отрабатывать правильно. Это ведь на ПК у нас есть курсор, а на мобильных устройствах — сенсорный дисплей. Devtools умеет принудительно включать режим эмуляции тач-скрина, даже без перехода в мобильный режим представления
Группировка CSS свойств
Надеюсь, вкладка computed ни для кого не секрет. А вот секретом может быть опция group, которая группирует свойства по категориям — внешний вид, разметка, и т. д. Очень удобно, когда свойств дохрена. Хотя если нужно найти определённое, то быстрее всего будет использование фильтра
