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:
