Полезные фишки DevTools 💻💪

В DevTools Google Chrome постоянно добавляются новые фичи. Из-за этого разработчику можно быть сложно отслеживать все обновления и помнить обо всех фишках. Сейчас мы расскажем о нескольких из них.

1. Rendering и эмуляция печати

Во вкладке Rendering (три точки → More tools → Rendering) есть много инструментов для удобной эмуляции разного поведения браузера. Например, вам может пригодиться опция Emulate CSS media type → print, которая будет отображать вашу страницу по умолчанию в режиме печати. Это может быть очень полезно, если вы реализовываете экшен печати страницы, и вам необходимо подкорректировать её стили.

2. Дебаг выпадающих списков

В этой же вкладке Rendering есть и другая полезная фича: Emulate a focused page. Эта опция будет полезна, если вам нужно подебажить стили, например, выпадающего списка у строки поиска, который по умолчанию скрывается, когда вы уводите с него фокус. Включенная галочка Emulate a focused page позволит вашему выпадающему списку не воспринимать переход в область DevTools или другое место как потерю фокуса. Таким образом ваш список не будет закрываться, и вы сможете легко отловить проблему или поправить стили.

3. Все CSS-изменение в одном месте

Часто бывает, что мы очень много экспериментируем со стилями в DevTools, пока не находим решение, которое нас устраивает. Чтобы не вспоминать все изменение и не переносить вручную, можно использовать вкладку Changes (три точки → More tools → Changes). Она в удобном виде покажет все изменения, которые были внесены вами и даст скопировать сразу все новые добавленные селекторы со стилями.

Какие еще полезные фишки DevTools вы знаете? 🤔 Делитесь в комментариях! 👩‍💻🧑‍💻