查看實(shí)際的HTML DOM

查看實(shí)際的HTML DOM

在調(diào)試會話期間，您可以在“調(diào)試”工具窗口的“元素（Elements）”選項(xiàng)卡中查看實(shí)現(xiàn)實(shí)際瀏覽器頁面及其HTML DOM結(jié)構(gòu)的HTML源代碼。此外，通過瀏覽器對頁面所做的任何更改都會立即反映在“元素”選項(xiàng)卡中。要監(jiān)視您在編輯器中所做的更改，請安裝JetBrains Chrome擴(kuò)展并啟用實(shí)時編輯功能，如“HTML，CSS和JavaScript中的實(shí)時編輯”中所述。

目前，此功能僅適用于Google Chrome，且僅在調(diào)試會話期間支持。

查看實(shí)際頁面的HTML源代碼和DOM結(jié)構(gòu)

1. 要啟動調(diào)試會話，請創(chuàng)建JavaScript Debug類型的運(yùn)行配置 ， 然后單擊工具欄上的。
2. 切換到“調(diào)試”工具窗口并打開“元素”選項(xiàng)卡。該選項(xiàng)卡由兩個窗格組成，兩個窗格都是只讀的。
   • “文本”窗格顯示當(dāng)前在瀏覽器中打開的頁面的HTML源代碼。只要對瀏覽器中的頁面進(jìn)行任何更改（例如，單擊圖標(biāo)），就會相應(yīng)地更新窗格中的代碼。
   • “結(jié)構(gòu)”窗格顯示“文本”窗格中HTML代碼的DOM結(jié)構(gòu)。
   該結(jié)構(gòu)和文本窗格相互同步。單擊DOM結(jié)構(gòu)中的節(jié)點(diǎn)時，IntelliJ IDEA將滾動“文本”窗格的內(nèi)容。窗格也與瀏覽器同步：只要單擊DOM結(jié)構(gòu)或“文本”窗格中的節(jié)點(diǎn)，IntelliJ IDEA就會突出顯示瀏覽器中的相應(yīng)元素。
3. 要查看已執(zhí)行腳本的樹，請打開“腳本”選項(xiàng)卡。