Chrome devtools 元素中的斜体是什么意思？

Question

我正在查看本网站汉堡菜单中的元素：

https://rainbowedit.com/

使用 Chrome devtools，Elements 中的 CSS 为红色斜体且不可编辑。这是什么意思？有没有办法让它们可编辑？

Answer 1

它似乎使用了某种注入到页面中的 JS 生成的 CSS。已知styled-components会这样做，然后这些样式在开发工具中是只读的。

来源：无法在 Chrome 中编辑样式？

我想您可能会在生产中看到通过“快速模式”注入的样式。这使用了一个特殊的 DOM API，Chrome DevTools 目前仅以只读容量显示该API。我们还没有放置一个逃生舱来禁用这种注入方法，但正在考虑中。

Answer 2

如果您在 Chrome 开发工具已在该页面上打开的情况下重新加载页面，则某些样式似乎会发生这种情况。尝试关闭开发工具，重新加载页面，然后重新打开开发工具，看看是否可以使它们可编辑。