![Это просто превью, не высматривайте тут интересного) Это просто превью, не высматривайте тут интересного)](https://habrastorage.org/r/w1560/getpro/habr/upload_files/97a/99f/6f1/97a99f6f15d8c2ba224cafd59e9712ed.jpg)
Chrome Devtools, безусловно, мощнейший инструмент для разработки, дебага, профайлинга и тестирования в браузере. С каждым релизом в него завозят всё новые и новые фичи. И время от времени на хабре выходят посты типа "10 крутых фишек Devtools". Но факт - то ли копирайтовый мир победил, то ли это не слишком интересная тема, но в большинстве случаев авторы описывают одни и те же возможности, которые существуют уже года 4. Мне кажется только ленивый сейчас не знает о console.time, о манипуляциях с анимациями, и о том что ветки DOM-дерева можно drag&drop-ать, и т. д.
Поэтому, позвольте же рассказать, какие интересные фичи знаю я. Вряд ли все они станут откровением, но знают о них точно не все.
Переопределение const
Те кто любят экспериментировать (или просто тестить всякую ерунду) в консоли devtools, наверняка сталкивались с проблемой - накидываешь код который использует const, тестишь - что-то не то. Правишь, enter - а const уже был определён, ошибка. Приходится перезагружать страницу, неудобно. Поэтому в последнем релизе в devtools отключили запрет на переопределение констант. Точнее - const работают как и прежде, но только в рамках одной REPL. Думаю, со скрином будет понятнее![Если запускаешь код в пределах одной команды - принцип работы const не изменился Если запускаешь код в пределах одной команды - принцип работы const не изменился](https://habrastorage.org/r/w1560/getpro/habr/upload_files/4a7/a8c/6b3/4a7a8c6b3de8691dd1c4c03176dcd1ea.jpg)
Если запускаешь код в пределах одной команды - принцип работы const не изменился
Grid - редактор
При работе с гридами, на элементе с display: grid; появляется бейджик, с надписью grid. Кликаем по нему - видим визуализацию нашей грид-разметки, её рамки, размеры, и т. д. Очень облегчает понимание происходящего.![Для Flexbox-ов есть точно такая же фича Для Flexbox-ов есть точно такая же фича](https://habrastorage.org/r/w1560/getpro/habr/upload_files/93e/412/3e1/93e4123e1c64a2f7eca9c57f49e9c26a.jpg)
Скриншот DOM-узла
Когда я узнал о этой фишке - первой моей мыслью было "чёрт, как я жил без этого раньше?!". Всё элементарно - devtools позволяет сделать скриншот отдельно взятого DOM элемента. Фантастически удобно, когда надо сделать скрин какой-то определённой части сайта - например, сайдбара.![ПКМ, Capture node screenshot ПКМ, Capture node screenshot](https://habrastorage.org/r/w1560/getpro/habr/upload_files/317/78e/79e/31778e79e6c5f823a38dd3b5e83a2619.jpg)
![Пример результата Пример результата](https://habrastorage.org/r/w1560/getpro/habr/upload_files/033/f46/971/033f469712b5feaa1af85842776c855a.jpg)
Удобное копирование CSS свойств
Не знаю, возможно это у меня руки неправильно заточены, но когда мне нужно было скопировать все css свойства - я выделял их мышкой, и вечно то промахнусь, то выделю не всё, и т. д.![Неудобно Неудобно](https://habrastorage.org/r/w1560/getpro/habr/upload_files/3cd/bba/926/3cdbba92669c8d34e94f830b65a564e0.png)
Оказывается - всё давно уже придумано, достаточно в контекстном меню выбрать Copy all declarations!
![Намного удобнее Намного удобнее](https://habrastorage.org/r/w1560/getpro/habr/upload_files/ff9/773/06a/ff977306aac307f6e796743e94195508.png)
Просмотр стейта JS кода без console.log-ов
Многие (я в том числе) дебажат js посредством вызовов console.log в нужных местах. При этом я слышал что есть какой-то debugger, и даже ставил его ради интереса - но изначально особо смысла не уловил. Оказывается же, это мощнейшая фича, которая позволяет смотреть состояние всех переменных в реальном времени. Покажу на примере![ключевое слово - debugger ключевое слово - debugger](https://habrastorage.org/r/w1560/getpro/habr/upload_files/b7d/fd1/d2e/b7dfd1d2ecd11a0d7daa9bbbd832e99f.png)
Теперь, при выполнении этого кода, когда интерпретатор дойдёт до debugger - выполнение остановится и автоматически откроется devtools с участком кода где произошла остановка. А справа, во вкладке scope, мы можем видеть все переменные в области видимости где установлен debugger, причём со всеми значениями.
![x, i - обе переменные видны x, i - обе переменные видны](https://habrastorage.org/r/w1560/getpro/habr/upload_files/7fb/ca6/f99/7fbca6f996e85fcb2966227fe5af465d.png)
Манипуляции с юзер-агентом
Когда-то мне было нужно изменять юзер-агент для тестирования, тогда я ставил какое-то стороннее расширение на хром. Сейчас же всё можно делать не выходя![Снизу нажимаем троеточие, там выбираем network conditions - тогда появится такой таб Снизу нажимаем троеточие, там выбираем network conditions - тогда появится такой таб](https://habrastorage.org/r/w1560/getpro/habr/upload_files/482/30d/35d/48230d35dc4972e91677c8f4a0e20b7b.png)
Брекпоинты по изменению DOM-дерева
Совершенно лютая вещь, как по мне. Особенно когда надо найти что-то в диком легаси коде, где какая-то jQuery лапша что-то там меняет на фронте.![383ab25a5c85661738a2d4b238d225ac.png](https://habrastorage.org/r/w1560/getpro/habr/upload_files/383/ab2/5a5/383ab25a5c85661738a2d4b238d225ac.png)
Теперь если какой-то код сделает изменения в любом элементе дерева - произойдёт эффект аналогичный с вызовом debugger. Точнее - остановка выполнения, и демонстрация участка кода который затриггерил дебаггер.
![a346776575d5befd3c60363a3b33cffa.png](https://habrastorage.org/r/w1560/getpro/habr/upload_files/a34/677/657/a346776575d5befd3c60363a3b33cffa.png)
Как видно, брекпоинты можно навешивать на три вида событий - на любое изменение, на изменение атрибутов. или на удаление узла из дерева.
Эмуляция сенсорных касаний
При разработке чего-нибудь мобильного, нужно убедиться в том, что touch-events будут отрабатывать правильно. Это ведь на ПК у нас есть курсор, а на мобильных устройствах - сенсорный дисплей. Devtools умеет принудительно включать режим эмуляции тач-скрина, даже без перехода в мобильный режим представления![Выбираем Force enabled, и перезагружаем страницу Выбираем Force enabled, и перезагружаем страницу](https://habrastorage.org/r/w1560/getpro/habr/upload_files/b1f/a78/83a/b1fa7883a5bc15036651b3cf26b4ef85.png)
Выбираем Force enabled, и перезагружаем страницу
Группировка CSS свойств
Надеюсь, вкладка computed ни для кого не секрет. А вот секретом может быть опция group, которая группирует свойства по категориям - внешний вид, разметка, и т. д. Очень удобно, когда свойств дохрена. Хотя если нужно найти определённое, то быстрее всего будет использование фильтра![Слева без group, справа c Слева без group, справа c](https://habrastorage.org/r/w1560/getpro/habr/upload_files/d30/a49/8a5/d30a498a53cf85037180c5b84b8fb821.png)
Слева без group, справа c
Источник статьи: https://habr.com/ru/post/569646/