Emulate media queries in Chrome, for example: prefers-color-scheme

Небольшая заметка-памятка, как отлаживать разные медиа выражения и режимы. Например, вы хотите отладить режим для печати или смену светлой и темной темы. В Chrome есть для этого инструменты, к которым можно подступиться несколькими способами.

Например нам надо отладить темную тему.

Вариант 1: через настройки

Открываете DevTools, заходите во вкладку Elements и там жмете на значок настроек (шестеренка). Далее ищите блок Rendering:

Собственно тут выбираете нужный вам режим.

Второй способ: через быстрый поиск

При открытой DevTools нажимаете комбинацию:

  • Win: Ctrl+Shift+P
  • Mac: []+[⇪Shift]+[P]

Далее печатаем Emulate и получаем нужный вариант:

Вот такая короткая заметка. Вроде бы все просто, но сам порой забываю про это.

Третий способ: на отдельной панели

Читатель Сергей Гордеев, подсказал еще один способ: можно открыть специальную вкладку по нажатию Esc, и на этой панели будет вкладка Rendering: