Styles are not visible in dev-tools panel

Question

I'm trying to display element styles for node with nodeId using devtools-protocol

When element is hovered and clicked I receive 4 messages in total

• CSS.getMatchedStylesForNode
• CSS.getComputedStyleForNode
• CSS.getPlatformFontsForNode
• CSS.getPlatformFontsForNode

to which I respond (I think) correctly, yet styles are not visible in dev-tools panel

Detailed communication:

Requests:

• {"id":35,"method":"CSS.getMatchedStylesForNode","params":{"nodeId":80}}
• {"id":36,"method":"CSS.getComputedStyleForNode","params":{"nodeId":80}}
• {"id":37,"method":"CSS.getPlatformFontsForNode","params":{"nodeId":80}}
• {"id":38,"method":"CSS.getInlineStylesForNode","params":{"nodeId":80}}

Responses. (Were too long, so I shorted them, CONTENT is a placeholder for their content)

• {"result":{"cssKeyframesRules":[],"inherited":[{ CONTENT }],"id":35}
• {"result":{"computedStyle":[{ CONTENT }],"id":36}
• {"result":{"fonts":[]},"id":37}
• {"result":{"inlineStyle":{"cssProperties":[],"cssText":"","range":{"endColumn":0,"endLine":0,"startColumn":0,"startLine":0},"shorthandEntries":[],"styleSheetId":"69061.90"}},"id":38}

I would love to hear any pointer in the direction of a solution.

Answer 1

Problem solved. Chromium CSSRule.js.

If the payload you report in getMatchedStyles includes styleSheetId's, then you should also report the stylesheet with this id to the front-end. You should emit the CSS.styleSheetAdded event for that.