作者：Eddie Aich
翻譯：瘋狂的技術宅
原文：https://dev.to/eddieaich/spy-on-the-dom-3d47未經允許嚴禁轉載

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

將鼠標懸停在 DOM 元素上會顯示其屬性！

自己嘗試一下

復制下面的整個代碼塊，并將其粘貼到瀏覽器 Web 控制臺中。現在將鼠標懸停在你正在瀏覽的任何網頁上。 看到了什么？

(

它是怎么運作的

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

用例

幫助解決UI錯誤

確保你所應用的 DOM 元素能夠按預期工作（比如點擊獲得正確的類，等等）

了解一個 Web 應用的結構

你可以從這段代碼中學到什么

如何使用 Vanilla JS 實現工具提示模塊

如何解析 DOM 對象的屬性

如何找到鼠標 X 和 Y 的位置

如何獲取文檔的滾動位置

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

開源

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

歡迎掃描下方二維碼，免費領取 webpack 教程。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。