查看實(shí)際的HTML DOM

2018-09-20 11:30 更新

查看實(shí)際的HTML DOM

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

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

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

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)