Повысьте продуктивность с помощью этих инструментов разработчика Chrome
Оглавление
- Проверьте производительность своего веб-приложения на устройствах низкого уровня
- Делайте снимки экрана на устройствах разного размера
- Сменить User-Agent
- Проверьте свою темную и светлую тему
- Протестируйте свое веб-приложение для людей с ослабленным зрением
- Фильтровать сетевые запросы по собственности
- Получить ссылку на узел DOM в консоли
- Бонус
Инструменты разработчика необходимы для разработки программного обеспечения. Они нужны нам для разработки, тестирования и отладки нашей работы. Очень высоки шансы, что вы используете Chrome DevTools в качестве разработчика веб-приложений.
Я покажу вам некоторые скрытые функции Chrome DevTools, которые помогут повысить вашу продуктивность.
Если вам это нужно, вот подробный пост от Google о том, как открыть Chrome DevTools разными способами.
P.s .: Некоторые функции могут быть недоступны в вашей текущей версии Chrome. Чтобы убедиться, что вы можете протестировать все функции, вы можете использовать канареечную версию. Вы можете скачать это здесь".
Проверьте производительность своего веб-приложения на устройствах низкого уровня
Как правило, мы, разработчики, работаем над высокопроизводительными устройствами с высокоскоростным подключением к Интернету. Но, к сожалению, у наших пользователей нет постоянного доступа к высокопроизводительным устройствам и высокоскоростным интернет-соединениям.
С появлением мобильных устройств мы все должны больше осознавать эту ситуацию. Не у всех есть сверхдорогие мобильные телефоны или доступ к LTE постоянно.
Вы знаете, как легко имитировать недорогие устройства и низкоскоростные интернет-соединения?
Вы можете легко регулировать мощность процессора и скорость сети с помощью Chrome DevTools. Таким образом, вы можете протестировать производительность своего веб-приложения и оптимизировать его в соответствии с ней. Вот как это сделать:
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд. Напишите Show Performance и нажмите Enter, чтобы открыть панель производительности.
Нажмите значок шестеренки справа, чтобы открыть настройки захвата. Теперь вы можете выбрать различные параметры регулирования для сети и ЦП.
Существует также более простой вариант эмуляции предопределенных профилей устройств.
Нажмите CMD/CTRL + SHIFT + M, чтобы переключить панель инструментов устройства. Здесь вы можете выбрать между вариантами Mid-tier mobile и Low-end mobile. Эти параметры будут относиться к дросселированию сети и ЦП.
Делайте снимки экрана на устройствах разного размера
Вы создали красивое веб-приложение и хотите сделать снимок экрана. К счастью, Chrome DevTools вас поддержит. Вы можете легко сделать нормальный полноразмерный снимок экрана или снимок экрана области для своего веб-приложения. Вот как это сделать:
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд. Напишите screenshot, чтобы увидеть все варианты создания снимков экрана. Выберите один из них, чтобы сделать снимок экрана.
Существует также более простой способ делать нормальные и полноразмерные снимки экрана.
Нажмите CMD/CTRL + SHIFT + M, чтобы переключить панель инструментов устройства. Нажмите меню из трех точек справа от панели инструментов устройства. Здесь вы можете выбрать между Capture screenshot и Capture full size screenshot.
Эти параметры сделают снимки экрана для выбранной области просмотра эмулируемого устройства.
Изменить User-Agent
Как разработчику веб-приложений вам необходимо писать приложения, которые работают на нескольких платформах. Как будто этого недостаточно, вам также необходимо рассмотреть разные браузеры на разных платформах.
Возможно, вам придется условно изменить таблицы стилей для определенного браузера или вы хотите предложить продукт для группы пользователей.
Что ж, благодаря Chrome DevTools вы можете легко изменить пользовательский агент на лету и протестировать все это. Вот как это сделать:
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд.
Напишите Show Network conditions и нажмите Enter, чтобы открыть панель условий сети. Снимите флажок Select automatically рядом с параметром User agent. Теперь вы можете выбирать из предопределенного списка пользовательских агентов.
Проверьте свою темную и светлую тему
Свойство prefers-color-scheme CSS помогает определить, просил ли пользователь использовать тему светлого или темного цвета. С помощью этого свойства вы можете легко переключаться между темными и светлыми темами без какого-либо взаимодействия с пользователем.
Чтобы проверить это поведение, вам не нужно менять настройки системы. Chrome DevTools поможет вам сделать это с легкостью. Вот как это сделать:
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд. Напишите Show Rendering и нажмите Enter, чтобы открыть панель рендеринга.
Здесь вы можете выбрать между prefers-color-scheme: light и prefers-color-scheme: dark, используя параметр Emulate CSS media feature prefers-color-scheme.
Протестируйте свое веб-приложение для людей с ослабленным зрением
Как разработчики веб-приложений, мы обязаны обеспечить доступность нашей работы.
Без каких-либо визуальных недостатков может быть трудно понять, что это такое, и проверить нашу работу в соответствии с этим. К счастью, Chrome DevTools тоже прикрывает нашу спину.
Используя эмуляцию визуального дефицита, вы можете протестировать свое веб-приложение на людях с нечетким зрением, протанопией, дейтеранопией, тританопией и ахроматопсией. Вот как это сделать:
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд. Напишите Show Rendering и нажмите Enter, чтобы открыть панель рендеринга.
Здесь вы можете выбрать между Blurredvision, Protanopia, Deuteranopia, Tritanopia и Achromatopsia с помощью параметра Emulate vision deficiencies.
Фильтровать сетевые запросы по собственности
Знаете ли вы, что с помощью свойств можно фильтровать сетевые запросы по множеству различных критериев?
Chrome DevTools предоставляет множество возможностей для фильтрации сетевых запросов. Например, вы можете фильтровать запросы размером более 1 Кбайт по размеру с помощью свойства larger-than:1k.
Откройте Chrome DevTools. Нажмите CMD/CTRL + SHIFT + P, чтобы открыть меню команд. Напишите Show Network и нажмите Enter, чтобы открыть панель сети. Введите larger-than:1k во вход фильтра и нажмите Enter.
Вы можете найти полный список в следующем сообщении от Google.
Получить ссылку на узел DOM в консоли
Вы когда-нибудь хотели получить ссылку на узел DOM в консоли для некоторого тестирования? Для этого вы можете использовать JavaScript. Вы можете использовать такие методы, как document.getElementById, и назначить узел переменной.
Но некоторые узлы могут не иметь идентификатора или даже класса. Вместо того, чтобы бороться с селекторами, вам нужно найти более простой способ. В этом случае вы можете воспользоваться Chrome DevTools.
В Chrome DevTools есть функция Store as global variable. Вы можете легко получить любой узел в консоли, используя эту функцию. Вот как это можно использовать:
Щелкните правой кнопкой мыши любой узел, который хотите отобразить на экране. Выберите Inspect в меню, чтобы открыть Chrome DevTools, и выберите элемент.
Щелкните правой кнопкой мыши узел на панели элементов. Выберите Store as global variable. После этого он будет доступен в консоли в глобальной переменной.
Бонус
Ну, на самом деле это не особенность. Но знание сочетаний клавиш очень помогает повысить производительность. Здесь вы можете найти все сочетания клавиш, которые можно использовать с Chrome DevTools:
Заключение
Chrome DevTools - мощный инструмент. Есть много других функций, о которых вы, возможно, не знали. Ознакомьтесь с разделом ресурсов ниже, чтобы узнать больше.
