Примените другие эффекты: включите автоматическую темную тему, эмулируйте фокус и многое другое.

София Емельянова
Sofia Emelianova
GitHub

Откройте для себя полезные эффекты, которые можно применить к вашей странице, с помощью этой ссылки на параметры вкладки «Визуализация» .

Выделить рамки объявлений

Чтобы проверить, помечены ли кадры как реклама:

  1. Откройте вкладку «Рендеринг» в этой демонстрации и установите флажок «Выделить рамки объявлений» .
  2. Обратите внимание на рекламный фрейм, выделенный красным.

Объявление выделено красным

Эмулировать целевую страницу

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

Чтобы эмулировать сфокусированную страницу:

  1. Откройте страницу с элементом для отладки, например сайт YouTube с панелью поиска.

  2. На странице откройте вкладку «Визуализация» , затем установите и снимите флажок «Имитировать выделенную страницу» .

    Эмулировать целевую страницу

Вы также можете найти ту же опцию под кнопкой :hov на панели действий в разделе «Элементы» > «Стили» .

Отключить локальные шрифты

Проверьте, работают ли альтернативные локальные шрифты должным образом, отключив источники local() в правилах @font-face .

Часто разработчики и дизайнеры при разработке используют две разные копии одного и того же шрифта:

  • Локальный шрифт для ваших инструментов дизайна и
  • Веб-шрифт для вашего кода

Отключение локальных шрифтов облегчит вам:

  • Отладка и измерение производительности загрузки и оптимизации веб-шрифтов.
  • Проверьте правильность правил CSS @font-face
  • Узнайте о различиях между веб-шрифтами и их локальными версиями.
Chrome отображает это предложение в Courier New, если находит этот шрифт на вашем устройстве.

Эмулируйте отсутствующие источники local() в правилах @font-face :

  1. Просмотрите приведенное выше предложение, откройте «Элементы » > «Вычисляемые» , прокрутите до конца вниз и в разделе «Визуализированные шрифты » обнаружите, что Chrome нашел Courier New в локальных файлах.

    Орисованные шрифты: локальные

  2. Откройте вкладку «Визуализация» , установите флажок «Отключить локальные шрифты» и , перезагрузите страницу.

  3. Обратите внимание на предложение в Roboto, найденное в Интернете.

    Орисованные шрифты: сетевой ресурс

Включить автоматический темный режим

Посмотрите, как может выглядеть ваш сайт в темном режиме, даже если вы его не реализовали.

В Chrome 96 появилась пробная версия Origin для Auto Dark Theme на Android. Благодаря этой функции браузер применяет автоматически созданную темную тему к сайтам со светлой тематикой, если пользователь выбрал темные темы в операционной системе.

Чтобы включить автоматический темный режим:

  1. На этой странице откройте вкладку «Рендеринг» и установите флажок «Включить автоматический темный режим» .
  2. Просмотрите эту страницу в темном режиме.

Автоматический темный режим включен

Имитировать недостатки зрения

Каждый должен иметь доступ к Интернету и наслаждаться им. Google стремится воплотить это в жизнь .

С помощью Chrome DevTools вы можете увидеть, как люди с нарушениями зрения видят ваш сайт, и сделать его лучше для них. Дополнительную информацию см. в разделе «Имитация нарушений цветового зрения ».

Чтобы имитировать недостатки зрения:

  1. Откройте вкладку «Рендеринг» .

  2. В разделе «Имитировать недостатки зрения» выберите в раскрывающемся списке один из следующих вариантов:

    • Никакой эмуляции .
    • Затуманенное зрение .
    • Уменьшенный контраст .
    • Протанопия (без красного цвета) . Низкое восприятие красного цвета; путаница зеленого, красного и желтого цветов.
    • Дейтеранопия (без зеленого цвета) . Низкое восприятие зеленого цвета; путаница зеленого, красного и желтого цветов.
    • Тританопия (без синего цвета) . Низкое восприятие синего цвета; путаница зеленого и синего.
    • Ахроматопсия (отсутствие цвета) . Частичное или полное отсутствие цветового зрения.

Выбранная Тританопия (без синего цвета).

Отключите форматы изображений AVIF и WebP.

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

Предположим, у вас есть следующий HTML-код для предоставления изображения в форматах AVIF и WebP для новых браузеров, а также резервного изображения PNG для старых браузеров.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Чтобы отключить все изображения AVIF на странице (или, аналогично, изображения WebP):

  1. Откройте вкладку «Рендеринг» , установите флажок «Отключить формат изображения AVIF» .
  2. Перезагрузите страницу и наведите указатель мыши на img src . Источник текущего изображения ( currentSrc ) теперь является резервным изображением WebP.

Эмулировать типы изображений

Аналогичным образом вы можете отключить изображения WebP.