作為一名前端工程師吏颖，對 Chrome 的 DevTools 調(diào)試工具再熟悉不過蝙眶，開發(fā)過程中季希，我們經(jīng)常使用其來調(diào)試頁面 UI，調(diào)試接口幽纷，debug問題等等式塌，那在調(diào)試 UI 時，大部分都是調(diào)試在靜態(tài)狀態(tài)下的元素友浸，當我們需要檢查一個在 hover 狀態(tài)下才顯示的元素時我們是如何檢查的呢峰尝？比如檢查一個 Tooltip 元素，按照正常操作收恢，進行右鍵檢查元素武学，元素會消失祭往，那么這種情況下，我們有什么方法解決這種場景下的問題火窒，本篇文章將介紹一種調(diào)試技巧來解決此問題
使用場景
檢查一個在hover狀態(tài)才顯示的元素
使用步驟
- 打開「控制臺」硼补，進入「源代碼」功能區(qū)。
- 顯示需要檢查的元素熏矿。如tooltip已骇，hover元素顯示tooltip。
- 暫停腳本執(zhí)行票编。即使用快捷鍵 「comand + \」 或「F8褪储，讓 hover 后的元素暫停在hover的狀態(tài)
- 選擇 hover 下顯示的元素，跳轉(zhuǎn)到「元素」下的具體元素慧域。選擇「控制臺」功能bar最左邊的「選擇元素」按鈕乱豆，點擊 hover 狀態(tài)的元素，會跳轉(zhuǎn)到「元素」功能區(qū)下具體元素吊趾，可與普通的檢查元素一樣去檢查素元素了宛裕。
效果預覽
image.png
