0

I am doing a research about finding the unused rules and overridden properties for a website. So in order to prove my research, I have to compare my result with the most precise result, that is from the browser. What I needed is all provided in the style pane in browser developer tools(devtools screenshot). The style pane displays the rules applied to a DOM, the CSS-file source, and the overridden property. I have tried to create a browser extension, but I didn't find any Browser API for retrieving that information. Did I miss some information about Browser API, such as retrieving applied rules and overridden properties ? Or there is another workaround to get that information ? Because I needed to compare the results automatically. Any idea would be really appreciated. Thanks

Hendra Huang
  • 528
  • 1
  • 9
  • 16
  • 1
    I see that you've edited your question after I marked the question as a duplicate of another. Have you read the other question and its answers? If yes and it doesn't answer your question, could you explain in what way it fails to answer your question? – Rob W May 25 '15 at 08:54
  • @RobW I've read that. They explained how to get matching rules from a DOM using Javascript. What I wanted to know is that how to get matching rules using Browser API. – Hendra Huang May 25 '15 at 12:06
  • What is "the Browser API"? Chrome extensions are written in JavaScript, and can also execute code on the page via [content scripts](https://developer.chrome.com/extensions/content_scripts), so an answer that explains how to get the matching rules in JS should be sufficient. – Rob W May 25 '15 at 12:32
  • @RobW I mean the Chrome API or Firefox API. If I'm using that javascript code, it means that I have to process the DOM and the CSS rules to get the matching rules, meanwhile that information is existed in the style side pane in Chrome devtools. So I wonder if there is API to retrieve that information so I didn't need to process the rules again. – Hendra Huang May 25 '15 at 12:50
  • In Chrome, there is a `getMatchedCSSRules` method, you can use that method to extract the stylesheet information for a specific element. This API is deprecated though, and will be dropped from future versions of Chrome. But you can still use it today, which should be OK for your purpose (research). – Rob W May 25 '15 at 13:10
  • @RobW thanks for your suggestion. Yes I can get the matching rules, but I don't get information about overridden properties like what devtools shown us. – Hendra Huang May 26 '15 at 03:53

0 Answers0