在开发人员窗口中显示内联样式元素，但在查看源代码时不显示

Inline style element appers in develoer window but not when viewing source code

本文关键字：显示元素查看源代码样式开发窗口更新时间：2023-09-26

我正在看一个有验证码的表单。所应用的CSS使它看起来很古怪。我即将诊断这个问题，我正在看我的谷歌chrome开发人员窗口应用的样式。对于每个单独的规则，框的右上角都有浅灰色文本，说明代码的来源。我感兴趣的一个规则表明它来自<style></style>，我假设这是一个内联样式规则。点击源代码，它会将我带到已定义的<style>元素，并确定规则在那里。这些规则在源文件中不存在，所以我很确定元素是通过javascript添加的。当我点击ctrl + u查看源代码时，<style>元素不在那里。

我怎么能看到一个元素，存在于开发人员窗口，而不存在于视图源代码?

JavaScript创建的元素在源代码中不可见，这是因为它们是动态创建的，当您使用"查看页面源代码"时，您将获得服务器返回的页面源代码，而无需执行JavaScript。