大家好，我是 CUGGZ。

今天來分享一些不太常用，但是非常實用的前端調試技巧，希望對你有所幫助！

• 懸停時檢查彈出窗口
• 使用日志斷點
• 模擬可折疊設備
• 自動完成樣式
• 切換顏色格式
• 捕獲高分辨率截圖
• 檢查事件流
• 查看和復制樣式更改
• 實時表達式
• 調試水平滾動條

懸停時檢查彈出窗口

你是否曾經為檢查只在懸停時出現的彈出元素（如 tooltip、下拉菜單等）而苦惱？這些元素一旦頁面失去焦點就會消失，導致檢查變得異常困難。Chromium瀏覽器提供的“Emulate a focused page”功能正是為了解決這個問題，確保在使用 DevTools 時頁面保持聚焦狀態。

要在 DevTools 中啟用此功能，有兩種方法：

• 在“Elements”面板中選中觸發彈出元素的項。接著打開“Styles”面板，并點擊“:hover”按鈕以激活懸停狀態。然后，啟用“Emulate a focused page”選項，這樣即使你與 DevTools 交互，頁面也會保持聚焦狀態。
• 打開命令菜單，運行“Show Rendering”命令，在DevTools底部打開“Rendering”抽屜。在抽屜中向下滾動，找到“Emulate a focused page”選項并勾選它。

使用日志斷點

如果你習慣使用console.log()來調試代碼，那么現在有一個更優雅的方法可以在控制臺中查看日志輸出，可以避免在代碼中添加大量的console.log()語句。特別是在調試生產代碼時，這一方法格外有用。

對于 Chromium 瀏覽器，可以在“Sources”面板中打開腳本，然后右鍵點擊想要記錄日志的行號，并選擇“Add logpoint…”。在彈出的窗口中，輸入想要在控制臺中顯示的消息，并插入想要記錄的變量。這樣，當代碼執行到這一行時，相應的日志信息就會出現在控制臺中，而無需修改原始代碼。

在 Firfox 中，可以在 “Debugger” 面板中使用類似的功能，只需找到想要記錄日志的行號，右鍵點擊，然后選擇“Add log”即可。

模擬可折疊設備

近年來，可折疊設備成為市場上的新寵。但由于它們具有兩個由縫隙分隔的屏幕，因此在可折疊屏幕上，應用可能與在單屏設備上看起來有所不同。為了提供更出色的用戶體驗，我們需要充分利用可折疊屏幕周圍的空間，并圍繞雙屏的約束條件來設計網站。幸運的是，一些瀏覽器提供了模擬可折疊設備或雙屏設備的功能，讓我們能夠更直觀地了解網站在不同模式下的顯示效果。

在Chromium瀏覽器中，可以進入設備仿真模式并選擇可折疊設備。一旦選中，工具欄上將會出現額外的按鈕。通過這些按鈕，可以輕松切換豎屏和橫屏模式，或者切換到單屏和雙屏模式，從而查看網站在不同布局下的外觀。

自動完成樣式

Chromium瀏覽器具有一項強大的功能：當只輸入值時，DevTools 會自動推薦最匹配的屬性-值對。比如，只需輸入“bold”，DevTools 就會推薦“font-weight: bold”作為首選樣式。

在Safari中，即使在聲明中有拼寫錯誤，網頁檢查器也會嘗試模糊匹配，并建議最接近的屬性-值對。

切換顏色格式

所有主流瀏覽器的 DevTools 都支持通過按住Shift鍵并點擊顏色預覽框來切換編寫的顏色格式，從而在各種顏色格式（如十六進制、rgb、hsl、hwb）之間循環選擇。此外，還可以在顏色選擇器中使用上下箭頭鍵來更改顏色格式。

在Chromium和Safari瀏覽器中，可以通過顏色選擇器從瀏覽器窗口外部輕松選取顏色。特別是在Safari中，還可以將顏色格式調整為display-p3。在顏色選擇界面中，你會看到一條白線，它標示了sRGB的邊緣。白線右上方的所有顏色都屬于Display-P3色域，但在sRGB中并不可用。為了確保兼容性，可以右鍵點擊顏色框，選擇“Clamp to sRGB”功能，這將自動將其轉換為 sRGB 空間中最接近的可用顏色。

捕獲高分辨率截圖

如果你無法訪問高分辨率設備，通常需要借助瀏覽器擴展、第三方服務或Node.js庫來捕獲網站的高清截圖。但借助 DevTools，可以直接在瀏覽器內為整個頁面或視口捕獲高分辨率截圖，無需額外工具。

在Chromium瀏覽器中，操作步驟如下：

1. 在DevTools中，點擊“Toggle device toolbar”圖標（Cmd+Shift+M或Ctrl+Shift+M）進入響應式設計模式。

2. 在設備工具欄中，點擊 ? 中的 Add device pixel ratio 選項。

3. 在視口頂部的操作欄中，從新增的DPR下拉菜單中選擇合適的DPR值。默認值為2，可以根據需要選擇更高的值，例如 3。

4. 點擊 ? 中的“Capture screenshot”選項以獲取當前視口的高清截圖，或選擇“Capture full size screenshot”以捕獲整個頁面的高清截圖。

圖片

在Firefox中：

• 想要捕獲頁面的高分辨率截圖，可以打開Console面板，并運行命令:screenshot --dpr 3，這樣就能夠以設備像素比設為3的方式獲取截圖。
• 如果希望捕獲整個頁面的截圖，只需在命令后添加--fullpage即可。此外，如果想要捕獲某個可以通過選擇器標識的節點的截圖，可以添加--screenshot .header到命令中即可。

檢查事件流

如果你的 Web 應用通過服務器發送事件（Server-Sent Events, SSE）從服務器接收一系列的事件流，你或許需要能夠在 DevTools 中檢查這些傳入的事件流。SSE 的行為與傳統請求-響應模式有所不同，因此，在 Network 面板中你只會看到一個請求。

不過，在Chromium瀏覽器中，你依然能夠輕松地檢查傳入的事件流。只需打開對應的請求，然后導航至“EventStream”標簽頁即可。此外，這個標簽頁還會捕獲服務器通過XHR和Fetch發送的事件，讓你能夠全面了解事件流的動態。與網絡面板類似，還可以使用正則表達式來過濾流，或清除表格中的項。

查看和復制樣式更改

DevTools 允許你調整頁面樣式并實時預覽效果。但逐一識別并手動復制修改過的樣式到編輯器中是相當的麻煩。如果你常需要在編輯器和 DevTools 間來回切換以復制樣式變更，那么這里有一個更便捷的方法。

在Firefox中：只需在“Rules”面板中對CSS聲明進行所需調整，然后開啟“Changes”選項卡，即可快速查看所有已變更樣式的差異。點擊“Copy All Changes”按鈕，即可一鍵復制這些修改過的樣式，之前的聲明會自動以注釋形式保留，方便對比和整合。

在Safari中：可以在“Styles”面板中對 CSS 聲明應用更改，然后點擊“Changes”面板以查看差異。

實時表達式

如果你經常需要在控制臺中重復輸入相同的JavaScript表達式，那么實時表達式功能將大大簡化你的工作流程。這一功能類似于調試器中的監視功能，能夠實時計算你在與網頁交互時所使用的表達式值。

在 Chromium 瀏覽器中，只需點擊控制臺中的眼睛圖標，即可輕松創建一個實時表達式。隨后將出現一個文本框供你輸入表達式。只需在文本框中輸入表達式，然后按下 Enter 鍵，即可實時查看計算結果。

實時表達式會始終顯示在控制臺的頂部，便于隨時查看。可以根據需要添加多個實時表達式，以便同時監控多個表達式的值。此外，如果想輸入多行表達式，只需按下 Shift+Enter 即可。

調試水平滾動條

在前端開發過程中，不期望出現的水平滾動條常常成為調試的難點，尤其是當需要定位導致溢出的具體元素時。幸運的是， Firefox 提供了獨特的方法來輕松識別這些元素。

在 Firefox 的“Inspector”面板中，系統會自動為具有滾動條的元素添加scroll標識。只需點擊這個標識，Firefox 就會立即高亮顯示那些導致容器產生滾動條的元素，并為其加上overflow的標識。