Я хотел бы проанализировать страницы и обнаружить элементы, которые имеют некоторые переопределенные стили.
У меня ограниченная коллекция элементов, которые я хочу исследовать.
Я начал с выборки computedStyles для каждого из тех элементов, где можно ожидать аналогичного вывода, как в Chrome DeveloperTools:
let computedStyles = window.getComputedStyle(document.getElementById("testing-element"));
, но существует только один экземпляр CSSStyleDeclaration, который представляет только набор результатов стилей.
Вместо этого я хотел бы видеть что-то подобное для одного стиля (например, font-size):
font-size: 24px;
---
24px .error-page-title myCustom.css
22px h1 common.css
2.42857rem h1 master.css
2em h1 user agent stylesheet
Теперь я мог бы определить, какой элемент переопределил размер шрифта другим css ( или прямой атрибут стиля элемента), чем master. css или общий. css.
Такая информация отображается в DevTools в chrome, но мне нужно автоматизировать ее для сбора некоторого отчета.
Или есть какой-нибудь рабочий инструмент, который обеспечит эту функциональность?