作者：Eddie Aich
翻譯：瘋狂的技術(shù)宅
原文：https://dev.to/eddieaich/spy-on-the-dom-3d47未經(jīng)允許嚴(yán)禁轉(zhuǎn)載

通過使用此模塊，只需將鼠標(biāo)懸停在瀏覽器中，即可快速查看DOM元素的屬性。基本上它是一個(gè)即時(shí)檢查器。

將鼠標(biāo)懸停在 DOM 元素上會(huì)顯示其屬性！

自己嘗試一下

復(fù)制下面的整個(gè)代碼塊，并將其粘貼到瀏覽器 Web 控制臺(tái)中。現(xiàn)在將鼠標(biāo)懸停在你正在瀏覽的任何網(wǎng)頁上。 看到了什么？

(

它是怎么運(yùn)作的

此模塊以 IIFE 的形式實(shí)現(xiàn)。這樣只要需要一些 DOM 監(jiān)視輔助，就可以將代碼復(fù)制并粘貼到 Web 控制臺(tái)中。將 div 插入到文檔的正文中，并在正文上啟用鼠標(biāo)事件偵聽器。從目標(biāo)元素中檢索屬性，將其簡化為單個(gè)字符串，最后在工具提示中顯示。

用例

幫助解決UI錯(cuò)誤

確保你所應(yīng)用的 DOM 元素能夠按預(yù)期工作（比如點(diǎn)擊獲得正確的類，等等）

了解一個(gè) Web 應(yīng)用的結(jié)構(gòu)

你可以從這段代碼中學(xué)到什么

如何使用 Vanilla JS 實(shí)現(xiàn)工具提示模塊

如何解析 DOM 對(duì)象的屬性

如何找到鼠標(biāo) X 和 Y 的位置

如何獲取文檔的滾動(dòng)位置

了解不同瀏覽器的行為方式 —— Edge vs. Chrome vs. Safari

開源

你可以在這里找到源代碼，希望你能做得更好！也許你不希望將其作為 IIFE 來實(shí)現(xiàn)，或者是去顯示其他數(shù)據(jù)。

歡迎掃描下方二維碼，免費(fèi)領(lǐng)取 webpack 教程。

總結(jié)

以上是生活随笔為你收集整理的ihtml2document能不能根据id获取dom_一段监视 DOM 的神奇代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。