样式在开发工具面板中不可见

Question

我正在尝试使用 devtools-protocol

显示带有 nodeId 的节点的元素样式

当元素悬停并单击时，我总共收到 4 条消息

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

我正确回应（我认为），但样式在开发工具面板中不可见

详细沟通：

请求：

• {"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}}

响应。 （太长了，所以我把它们缩短了，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}

我很想听听任何指向解决方案的指示。

Answer 1

问题解决了。铬CSSRule.js.

如果您在 getMatchedStyles 中报告的负载包括 styleSheetId， 那么您还应该将具有此 ID 的样式表报告给 前端。您应该为此发出 CSS.styleSheetAdded 事件。

Answer 2

从Google Chrome Dev Tools inspect element styles not showing试试这个。

我刚刚遇到了同样的问题，为了解决它，我进入了 Chrome 开发者工具 -> 设置 -> 滚动到底部并点击“恢复 默认并重新加载”然后一切都神奇地回来了！

在它工作和停止之间我没有改变任何东西 不知道为什么它坏了，但希望这对你也有帮助。

如果这不起作用，请尝试重新安装您的 Chrome 网络浏览器。