Получить элементы и стили, объявленные в медиа-запросе ⇐ CSS

[Anonymous]

Предположим, на странице есть такой медиа-запрос:

Код: Выделить всё

@media all and (max-width: 800px)
{
div
{
color: green;
}
}

На боковой панели DevTools браузера Chrome я могу увидеть это правило и его внутренние объявления на вкладке «Стили» после проверки страницы.
Я хочу воспроизведите эту возможность (просматривать объявления в медиа-запросе) программно, используя Puppeteer и протокол Chrome DevTools.

Код: Выделить всё

 // Launch browser, go to page, create CDP session, enable DOM/CSS/CSS rule usage tracking then:
const { medias } = await cdpSession.send('CSS.getMediaQueries')
console.log(medias)

Код: Выделить всё

medias

— это массив, содержащий объекты CSSMedia, и он может выглядеть примерно так:

Код: Выделить всё

[
{
text: "(min-width: 800px)",
source: "mediaRule",
sourceURL: "https://example.com/style.css",
range: {
"startLine": 10,
"startColumn": 5,
"endLine": 10,
"endColumn": 25
},
styleSheetId: "id",
mediaList: [
expressions: { value: 800, unit: "px", feature: "max-width", computedLength: 800 },
active: false
]
}
]

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

Код: Выделить всё

div
{
color: green;
}

В идеале было бы хорошо получить информацию в том же формате, что и возвращаемое значение CSS.getMediaQueries, но я не уверен, возможно ли это. В этом ответе описывается, как просмотреть правила в самом браузере, как я упоминал выше, и в ответе упоминается функция «Показать в исходном коде» в браузере. У меня такое ощущение, что это может означать, что сам Chrome может не иметь такой функции получения сериализованных объектов затронутых элементов/стилей и просто извлекает строку из исходного кода. Надеюсь, это не так. Я определенно не хочу анализировать строковые представления таблиц стилей.

Подробнее здесь: https://stackoverflow.com/questions/785 ... edia-query