內聯樣式元素在開發人員窗口中顯示，但在查看源代碼時不顯示

Question

我正在查看具有captcha的窗體。正在應用的CSS使得它看起來都很尷尬。我即將診斷此問題，並正在查看我的Google Chrome瀏覽器開發人員窗口中應用的樣式。對於每個單獨的規則，在框的右上方都有淺灰色文本，說明代碼的來源。我感興趣的一條規則表明它來自<style></style>，我認爲它是一種內聯式樣規則。點擊源代碼，它將我帶到已定義的<style>元素，並確保規則在那裏。這些規則不存在於源文件中，所以我很確定元素是通過javascript追加的。當我點擊ctrl + u查看源代碼時，<style>元素不存在。

如何查看開發人員窗口中存在的視圖源代碼中不存在的元素？

Answer 1

由JavaScript創建的元素在源代碼中不可見，這是因爲它們是動態創建的，並且當您使用「查看頁面源代碼」時，您將獲得服務器返回的頁面的源代碼，而不執行JavaScript。