Chrome DevTools: 10 полезных советов и рекомендаций

Я работаю с Chrome уже более десяти лет, задолго до того, как Mozilla удалось исправить свои проблемы с утечкой памяти. И, как человек, который ежедневно занимается фронтенд-разработкой, я также был активным пользователем Chrome DevTools. Будь то простейшая форма проверки CSS или выполнение тестов производительности, DevTools является неотъемлемой частью моей рутины как разработчика.

И за эти годы я не только научился, но и собрал различные советы и приемы, некоторые из которых не совсем ясны. Если вы хотите освежить в памяти все, что может сделать DevTools, я рекомендую обратиться к официальной документации. Но что еще более важно, страница «Что нового в DevTools», так как именно здесь вы сразу получите все новые функции и инструменты.

Лучший способ просмотреть этот ресурс — либо нажать CTRL+F и найти «ключевые слова», которые вас интересуют, либо вы также можете переключить оглавление выше, а затем сразу перейти к конкретному примеру. Я уверен, что со временем эта страница будет расширяться по мере того, как я буду узнавать что-то новое, так что смело добавляйте эту страницу в закладки для дальнейшего использования. Давайте начнем с чего-нибудь практичного, но очень полезного.

Блокировать ресурсы для отображения сайта без CSS/JavaScript

Мы воспринимаем JavaScript как должное, но есть много людей, которые блокируют JS в своих браузерах, причем большинство из них делают это по причинам, связанным с доступностью, конфиденциальностью и безопасностью.

И вы также должны учитывать случаи, когда JS/CSS может быть недоступен из-за проблем с сетью или из-за того, что браузер не может получить определенный ресурс. Итак, как выглядит ваш сайт, когда определенный файл/библиотека заблокированы?

• Откройте DevTools и перейдите на вкладку « Сеть ».
• Перезагрузите страницу, на которой вы находитесь, чтобы получить все ресурсы.
• Нажмите на любой ресурс и выберите Заблокировать URL-адрес ресурса .
• Обновите страницу еще раз, чтобы увидеть результат.

Я верю, что это также работает в инструментах разработчика Firefox и Edge.

Краткий обзор изменений CSS (с экспортом)

Вы когда-нибудь увлекались изменением CSS из DevTools только для того, чтобы понять, что теперь вам нужно вернуться к 10 различным свойствам, чтобы сохранить эти изменения? Ага. Был там, сделал это.

К счастью, есть лучший способ решить эту проблему.

• Перейдите в раздел «Настройка и управление DevTools» -> «Дополнительные инструменты» .
• Выберите Изменения .
• Внутри DevTools появится постоянная вкладка, демонстрирующая внесенные вами изменения кода.

Доступ к панели «Изменения» также можно получить с помощью сочетаний клавиш CTRL/CMD+Shift+P , а затем ввести «Изменения» в консоли «Выполнить». В нижней части интерфейса «Изменения» у вас есть кнопка « Копировать », которую можно использовать для прямого экспорта всех изменений, внесенных вами в этом сеансе.

Изменить структуру макета Grid и Flexbox

Недавно я написал статью о некоторых из лучших генераторов макетов CSS, поэтому следующий совет идет рука об руку с этой статьей. Сначала проверьте любой контейнер, поддерживаемый Grid или Flexbox, а затем найдите выделенное свойство с display: flex; или наоборот.

Рядом со свойством вы увидите небольшой интерактивный значок (редактор) — при нажатии на него откроется панель, из которой вы можете использовать свойства позиционирования, указанные в Grid или Flexbox.

Эта функция полезна, когда вы хотите протестировать новое выравнивание макета в режиме реального времени. Также есть вещь под названием CSS Grid Inspector, для которой команда разработчиков Chrome написала статью.

Отладка специальных возможностей с помощью встроенных инструментов

Доступность — очень горячая тема в кругах фронтенд-разработчиков. Настолько, что большинство библиотек компонентов и наборов пользовательского интерфейса уже созданы с учетом лучших практик доступности. Платформы CMS, такие как WordPress, также охватили доступность и начали внедрять функции, которые отдают приоритет инклюзивному дизайну. И DevTools не исключение из правил.

» Включение дерева специальных возможностей в Chrome DevTools

После того, как вы установите флажок « Включить », вам потребуется перезагрузить DevTools. На этом этапе у вас будет значок специальных возможностей в правом верхнем углу окна «Элементы». Щелкнув по этому значку, вы увидите всю структуру сайта в виде дерева DOM. Затем вы можете проверить отдельные разделы и элементы сайта и посмотреть, присвоены ли им метки ARIA.

» Просмотр исходного заказа

На той же панели, как показано на GIF выше, есть еще один флажок. И этот флажок называется Show source order . Что это делает — после включения — позволяет вам видеть порядок, в котором элементы появляются для посетителей, которые могут посетить ваши страницы с помощью вспомогательных инструментов.

После включения вы можете выбрать любую область своей страницы и увидеть порядок, в котором элементы будут отображаться.

Это особенно полезно при работе с Grid или Flexbox, оба из которых имеют свойства для изменения порядка отображения элементов. Например order: 1;

» Предложения по цвету для низкоконтрастного текста

Цветовой контраст — одна из основных проблем доступности, даже для людей, не обязательно страдающих серьезными нарушениями зрения. У меня были случаи, когда мое зрение начинало ухудшаться, и мне нужно было получить новый рецепт на мои очки, и вещь, которая выдавала это, была низкой / высокой контрастностью цветов, из-за которой мои глаза утомлялись. Белый на красном, зеленый на синем и т.д.

Команда web.dev написала статью о том, как работает следующий метод.

Этот метод работает для любого элемента на странице. Даже если вы считаете, что с контрастностью все в порядке, алгоритм коэффициента контрастности может сделать тонкие подсказки для улучшения общей видимости контраста.

Преобразование минифицированного JavaScript/CSS в читаемый код

Импорт минимизированного кода в VS Code, а затем применение Prettier занимает всего несколько секунд, но зачем беспокоиться, если вы можете форматировать (деминифицировать) прямо из консоли DevTools.

Чтобы это сработало:

• Откройте панель « Источники » внутри DevTools.
• Откройте любой файл, который был уменьшен.
• Щелкните значок { } в нижней части консоли.
• Теперь код отформатирован.

Редактирование (текст) и удаление элементов с помощью designMode

designMode является частью спецификации веб-API и позволяет напрямую редактировать элементы на странице, хотя и с некоторыми ограничениями. Например, редактировать можно только текст, а любой другой элемент можно полностью удалить. Имейте в виду, что это не «официальная» функция, но, тем не менее, она полезна при работе с такими вещами, как математические функции CSS и другие свойства текста.

Чтобы попробовать это самостоятельно:

• Откройте консоль DevTools.
• Введите document.designMode="on" и отправьте.
• Вернитесь на страницу и начните редактирование.

Свойство off также применимо, когда вы хотите отключить designMode. И в случае, если вы не заметили в GIF, это также отлично работает для проверки орфографии вашего контента на странице.

Захват скриншотов из эмулятора устройства

Это функция, которая долгое время ускользала от меня. Мой обычный рабочий процесс для создания скриншотов — это расширение Snip или Awesome Screenshot. Как оказалось, вы можете делать снимки экрана с мобильным/планшетным и другим разрешением прямо из эмулятора устройства.

Но это не единственная причина, по которой эта функция полезна. На самом деле вы можете делать снимки экрана, включая кадр устройства . Прежде чем я углублюсь в подробности, вот пример:

Итак, как включить рамку устройства для скриншотов мобильных устройств/планшетов?

• Откройте Инструменты разработчика.
• Щелкните значок панели инструментов «Переключить устройство ».
• Перейдите к правому верхнему значку меню (три точки).
• Выберите Показать рамку устройства .

Вот визуальный превью:

Проблема в том, что даже если вы нажмете кнопку, рамка устройства не будет отображаться. И это потому, что кадр отображается только на нескольких устройствах. На самом деле вам нужно будет вручную включить эти устройства из меню, доступного в Dimensions -> Edit . Эти типы устройств имеют рамку:

• iPhone 5/SE
• iPhone 6/7/8 и плюс
• Нексус 5 и 5x
• Нексус 6P
• айпад

Спасибо пользователю StackOverflow RoCk RoCk за разъяснение.

Выбор цветов вне браузера

Это одна из последних функций, добавленных в DevTools. Предполагая, что вы уже знакомы с палитрой цветов, теперь можно выбирать цвета, которых нет в браузере. Другими словами, вы можете выбирать цвета прямо со своего рабочего стола, будь то изображение или определенный значок.

Теперь вы можете получить цвета с ваших любимых фотографий еще быстрее.

Используйте copy() в качестве псевдоскребка

Функцию copy() можно использовать для массовой выборки объектов, найденных на странице. Для меня это самый быстрый способ быстро очистить все URL-адреса, найденные на странице.

В вашей консоли введите:

 copy($$('a').map(a => a.href).join('\n'))

И результат:

Альтернативная функция JavaScript будет выглядеть так:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

Как изменить цветовую тему Chrome DevTools

Интересно, сколько разработчиков изменили тему своего браузера Chrome на темную, но не поняли, что это нужно делать отдельно для DevTools. Я уверен, что их было довольно много.

Когда DevTools открыт, вы можете нажать F1 , чтобы открыть настройки. Откроется панель настроек по умолчанию, где вы можете выбрать светлую или темную тему или использовать системные настройки.

Загляните внутрь центра разработки

Это ни в коем случае не исчерпывающий список всего, что может сделать DevTools. И со временем я надеюсь добавить больше интересных трюков, которые мне попадаются. Я надеюсь, что по крайней мере один или два из этих советов были достаточно интересны для вас, чтобы добавить их в свои заметки. А если нет, зайдите позже!