В 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 вы знаете? 🤔 Делитесь в комментариях! 👩💻🧑💻