Продолжаем тему инструментов разработчика в Google Chrome. Если вы не знакомы с основами, посмотрите два вводных ролика по этой теме:
Вашему вниманию предлагается набор различных функций о которых вы, возможно не знали. В этой части про то, что касается DOM-дерева и общих полезных функций, а также про функции, связанные с сетью и вкладкой Network.
Сразу скажу, что там где я в горячих клавишах говорю Command для MacOS, на Windows вы просто заменяете это на Control.
Сгруппируем все рассматриваемые фичи в условные смысловые блоки:- то что касается DOM-дерева и общих полезных функций- функции, связанные с сетью и вкладкой Network, затем все про вкладки Console и Sources, про скрипты, в общем, и, наконец, остальные полезные фичи.
DOM-дерево и общие полезные функции
В девтулзах Хрома существует Палитра Команд, аналогичная специализированным редакторам кода и IDE вроде WebStorm или Sublime Text. Это чрезвычайно удобно, когда помнишь название фичи, но забыл где она находится в интерфейсе. Вызывается она через Command+Shift+P. Это комбинация для MacOS, для Windows клавиша Command это Control.
Если в начале введен символ «больше», то это выполнение команды (то бишь функции, для которой есть соответствующий элемент в интерфейсе). Введя символ вопроса, мы видим что можно еще открывать файлы, загрузившиеся для домена, переходить к строке, находясь в окне редактирования кода, переходить к именам функций, что удобно для ориентации в большом полотне кода, и запускать сниппеты, которые создаются через вот эту менюшку слева на вкладке Sources.
В последних версиях Хрома, через функцию подсветки нод, теперь доступно больше информации: тип элемента, классы, размеры, цвет, контраст и блочная модель. Очень удобно. Ранее подсвечивались только сами размеры элементов.
А специально для CSS Grid имеется особый вариант подсветки (https://gridbyexample.com/examples/), когда видна сетка, тоже чрезвычайно удобно для того, чтобы понять, что происходит.
Имеется функция создания скриншотов — доступно 4 варианта:
- скриншот выделенной области
- скриншот всей страницы, сколь угодно длинной она бы ни была
- скриншот только выбранной на вкладке Elements ноды
- скриншот вьюпорта, то есть только видимой в данный момент области страницы
Возможно вы сталкивались с попыткой отладить верстку с использованием hover’ов. Например, во вложенном меню вы хотите посмотреть на стили элементов вложенного списка. Тогда на помощь приходит функция Force Element State.
С помощью функции инспектирования выделяем целевую ноду и в выпадающем списке Force State ищем :hover. После этого на данная нода станет как бы насильно захаверенной и к ней применятся соответствующие стили, что можно видеть в панели справа. Ну точнее в данном случае li явлется как бы опороной нодой, на которой должен быть псевдокласс hover, чтобы ul.dropdown-menu получил соответствующие стили. Уход мышки с элементов и клики в стороне не скроют менюшку.
Ну и теперь можно аналогично захаверить и вложенный пункт. Не всегда с первого раза в чужой верстке можно понять, на кого вешать хавер, поэтому нужно попробовать различные ближайшие ноды. Ну и теперь можно без проблем стилизовать любой элемент. Например вот этот пункт третьего уровня.
Существует такое понятие как контраст, то есть насколько хорошо видно что-то на фоне чего-то. Для текста это чрезвычайно важно, сами понимаете почему. Так вот, в Color Picker’е имеется функция, сигнализирующая о том, удовлетворяет ли текст данного цвета, находящийся на том или ином фоне, особым требованиям. Если не вдаваться в подробности, то есть стандарт AA и AAA.
Выделим какую-нибудь ноду с текстом и посмотрим на свойство color. Кликаем сюда и появляются кривые, говорящие нам о том, что если цвет находится в верхней области, то контраст очень плохой и люди с плохим зрением или с его нарушениями, возможно не смогут прочитать текст, а люди с нормальным зрением будут сильно напрягать глаза. Средняя область это нормальный контраст, то есть стандарт AA. Ну и нижняя область это наилучший контраст — AAA.
В дополнение к копированию CSS-селектора и HTML-кода ноды, теперь есть возможность скопировать еще и команду JS для селектинга ноды через document.querySelector. Сохраняем в переменную и используем по необходимости.
Отладка медиа-запросов упрощается с помощью функции Show Media Queries. Для этого нужно войти в режим эмуляции устройств, выбрать в выпадающем списке Responsive и нажав на три точки тут, активировать функцию. Теперь сверху вы видите все медиа-запросы, имеющиеся на странице. Синяя полоска это max-width, зеленая от min до max-width и, наконец, оранжевая — min-width. Клик на любом отрезке приводит ширину вьюпорта к соответствующему брейкпоинту.
А если кликнуть по медиа-запросу правой кнопкой, то можно просмотреть в стилях место создания брейкпоинта. Кстати, чтобы отформатировать минифицированный CSS, не забываем использовать вот эту удобную кнопочку.
Сеть и вкладка Network
Отлично, а теперь поговорим про сеть и вкладку Network.
В инструменты разработчика встроена возможность искусственного замедления сети — полная скорость, быстрый 3G, медленный 3G, полное отключение от сети. Ну и можно добавить свой профиль, где будет указана скорость получения и отправки данных, а также задержка. Очень полезно для теста реальных приложений, потому что некоторые баги вылезают при задержках сети. А от них нам никуда в продакшене не деться.
Кроме того, вы можете искусственно замедлить производительность, чтобы понять, как приложение будет работать на маломощных устройствах. Performance -> Settings -> и вот здесь выпадашка.
На вкладке Network, как вы знаете, отображается информация о всех сетевых запросах — будь то картинка, стиль, AJAX-запрос или еще что-то.. Каждый такой запрос является HTTP-запросом, а у такого запроса есть заголовки запроса/ответа и содержимое (или тело — body).
Так вот, если нажать Cmd+F, то появится окно поиска по всем заголовкам и телу ответа. Тут можно включать чувствительность к регистру или регулярные выражения. Можем например поискать содержание заголовка Origin — адрес домена, с которого был сделан запрос — и вот пожалуйста. Или все заголовки, начинающиеся с Content-.*: затем двоеточие — это уже регулярное выражение.
Их стоит учить через силу, если не идет, потому что они позволяют порой творить чудеса и серьезно экономить время. А порой без них вообще некоторые задачи не решить.
Функция Block Request URL — блокировка запроса ресурса. Позволяет буквально заблокировать загрузку любого файла, связанного со страницей. Например, можно посмотреть, как будет себя вести страница, если вдруг CDN, с которого грузится какая-то библиотека, упадет и не будет доступен. Можно предусмотреть механизм загрузки с домена сайта, в таком случае. Или то же самое можно применить к шрифтам, расположенном на сервисе типа Google Fonts.
Чтобы воспользоваться, нужно выбрать ресурс, и в контекстном меню выбрать Block Request URL. После перезагрузки вы получите статус (blocked:devtools). Разблокируется аналогично.
А можно и весь домен залочить — пункт ниже.
Эти опции блокировки могут быть полезны и при оптимизации уже имеющихся сайтов. Скажем, есть какой-то скрипт и нужно понять, из-за его ли наличия все ломается. Вот тут это и пригождается.
Чтобы всем этим удобно управлять, жмем Esc и показываем вкладку Request Blocking. Можно включить/отключить функцию на данной вкладке, добавить новое значение (допустимо использование регулярок) и удалить все. Отдельные пункты также можно активировать/деактивировать.
Всю информацию со вкладки Network можно записать в файл, нажатием вот тут в контекстном меню, и отправить другому разработчику, который просто перетащит его в интерфейс и увидит то, что было у вас. Ну или вы сами для себя их сохраните. Не думаю что будете использовать часто, но вдруг понадобится.
На вкладке Network можно фильтровать ресурсы очень хитрым образом, с помощью операторов. Вот тут вводим domain: и фильтруем по домену, а если введем larger-than:, то сможем выделить ресурсы в диапазоне размеров. Очень удобно, потому что ресурсов может быть оочень много. Все доступные операторы можно глянуть в доках тут — https://developers.google.com/web/tools/chrome-devtools/network/reference#filter-by-property