Перевод статьи «My Favorite Chrome Dev Tools Tips and Tricks».
Chrome Developer Tools (инструменты разработчика в браузере Chrome) это очень мощный набор инструментов для разработки веб-приложений. Они способны на многое, от самых базовых операций вроде траверсирования DOM до проверки сетевых запросов и даже профилирования производительности вашего приложения.
Помимо общеизвестных основных функций, в инструментах разработчика, если хорошо приглядеться, можно найти много скрытых жемчужин. Это функции, способные сэкономить вам один-два клика, а разве не к этому мы все стремимся?
DOM-запросы в стиле jQuery в консоли
Библиотека JQuery прекрасна. Она правила вебом больше десятилетия, а кое-какие статистические данные показывают, что и сейчас больше 70% самых популярных веб-страниц в мире запускают какую-нибудь версию jQuery. Это просто потрясающе, с учетом того, что библиотека вышла еще в 2006 году.
Самый популярный API jQuery предоставляет $, используемый для выбора элементов DOM. Консоль в инструментах разработчика позволяет вам использовать селектор $ и многое другое. Под капотом $ является псевдонимом document.querySelector().
Например, если вы хотите сымитировать клик по элементу, вы можете сделать это следующим образом:
Аналогично, $$ это псевдоним для document.querySelectorAll():
В рукаве у $ припрятаны и другие козыри. Иногда селектор может быть слишком сложным, чтобы писать его по памяти, или же вы просто можете не знать достаточно специфичный селектор. Если вы выберете элемент во вкладке Elements, вы сможете получить его в консоли при помощи переменной $0:
Больше того, консоль позволяет нам получить доступ не только к последнему выбранному элементу, но как минимум к пяти, по порядку. Эти элементы доступны благодаря переменным $0 — $4.
Копирование свойств элемента
Вкладка с элементами очень полезна. Там хранится DOM-дерево нашего сайта, что позволяет нам просматривать CSS по каждому элементу. Там же можно вносить изменения в элементы прямо на лету.
В процессе работы я нашел один очень классный прием — возможность копировать свойства элемента (и не только свойства) при помощи контекстного меню.
Например, можно скопировать селектор элемента:
Этот селектор может быть недостаточно или чрезмерно специфичным для продакшена, но он способен существенно облегчить вашу жизнь при отладке.
Как видно на предыдущей гифке, в контекстном меню позиция «Копировать» скрывает несколько других элегантных возможностей для копирования. Можно скопировать стили элемента, JS-путь (document.querySelector(SELECTOR)) или Xpath.
Фильтрация сетевых запросов
Иногда случается работать со страницей, имеющей много запросов. То есть, действительно МНОГО.
И когда вы ищете что-то конкретное, прорабатывать все эти запросы может быть сложно. Поэтому очень хорошо, что есть возможность легко их отфильтровать.
Панель инструментов фильтра (вкладка «Network») содержит быстрые переключатели для разных типов запросов, таких как XHR/Fetch, таблицы стилей, скрипты JS, изображения и др.:
Если вы хотите найти что-то более конкретное, вам нужно просто написать критерий фильтрации в поле ввода filter сразу над панелью инструментов. Так можно осуществить поиск по именам запросов:
Имитация разных скоростей сети
Продолжаем использовать вкладу «Network». С ее помощью мы можем протестировать наш сайт в условиях разной скорости интернета. По умолчанию установлено значение online — так можно насладиться всей широтой пропускной способности вашего соединения.
Но кроме online есть и другие опции: Fast 3G, Slow 3G и offline, при которых будет отличаться скорость загрузки и скачивания, а также период ожидания. Если вам нужно сымитировать другую, более редкую скорость, вы можете добавить собственный профиль при помощи кнопки Add…:
Использование Live Expressions в консоли
Что такое Live Expressions?
Live Expressions это выражения, которые непрерывно оцениваются в верхней части вашей консоли. Скажем, вы хотите отследить значение переменной:
Благодаря Live Expressions вы можете сосредоточиться на вашем коде и позволить Chrome заниматься мониторингом:
Это применимо к переменным, определенным как в консоли, так и в скрипте.
Имитация различных устройств
Те из нас, кому приходится работать с отзывчивыми приложениями, знают, каково это. Корпишь над созданием красивого макета, а он потом неверно ведет себя на девайсах с разными разрешениями.
Я не буду рассказывать о медиазапросах, лучше расскажу об удобном способе проверить, работают ли они.
Если кликнуть на кнопку в виде планшета и смартфона, вы увидите, что область просмотра браузера меняется, чтобы имитировать разрешение разных устройств.
Нужное устройство можно выбрать из обширного списка наиболее распространенных (iPhone X, iPad Pro, Pixel 2, Pixel 2 XL и пр.). Заметно, что список немного устарел, но я думаю, что для большинства случаев он все равно подходит.
Если вы не находите в списке нужного устройства, можно установить пользовательское разрешение. В примере ниже я сымитировал OnePlus 6:
Принудительное изменение состояния элемента
Вам случалось попадать в ситуацию, когда вы хотите поиграть с :hover-стилями элемента, но всякий раз, как вы перемещаете указатель мыши к разделу стилей в инструментах разработчика, элемент перестает быть hovered?
Что ж, инструменты разработчика в Chrome предлагают отличный способ заблокировать состояние элемента, чтобы вы могли мирно повозиться с его свойствами. Таким образом можно быстро переключать состояние элемента на положения :active, :hover, :focus, :focus-within и :visited.
Вот и все приемы работы с инструментами разработчика, которыми я хотел поделиться в этой статье! Спасибо за внимание!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]