前言

最近在使用一個前端表格時，發現它的選中行高亮太不明顯了，準備修改一下對應樣式：

但是，如果打開開發者工具調試樣式，發現又沒辦法觸發 Hover 事件，找不到具體的樣式。

怎麼辦呢？

思路

如果能爲 Hover 事件處理代碼加上斷點，運行到斷點時中斷就好了。

但這顯然是個悖論，如果我們都能手工定位 Hover 事件代碼了，還需要斷點啥事。

不過，雖然我們沒法手工打斷點，但是 JavaScript 確實有一個幫我們自動打斷點的幫手，debugger 語句:

debugger 語句用於停止執行 JavaScript，並調用 (如果可用) 調試函數。

使用 debugger 語句類似於在代碼中設置斷點。

通常，你可以通過按下 F12 開啓調試工具， 並在調試菜單中選擇 "Console" 。

注意：如果調試工具不可用，則調試語句將無法工作。

實現

現在的關鍵是，怎麼在 Hover 事件中執行 debugger 語句？

實現很簡單，打開開發者工具，在控制檯中編寫以下內容：

setTimeout(() => {debugger;}, 3000)

然後將鼠標懸停到需要的位置，直到中斷即可：

結論

其實，我們是利用了 JavaScript 是單線程的這一特點。

使用 setTimeout 激活了調試工具，它將阻止瀏覽器執行其它函數，包括對 DOM 進行更新，相當於中斷了 Hover 事件。

想了解更多內容，請關注我的個人公衆號”My IO“

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ta7b60eIJz4tzwTf4VgwJA