前端開發小技巧匯總

未經授權，禁止轉載，轉載請註明出處！

大家好，我是 CUGGZ。

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

懸停時檢查彈出視窗

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

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

1. 在「Elements」面板中選中觸發彈出元素的項。接著開啟「 styles」面板，並點選「:hover」按鈕以啟用懸停狀態。然後，啟用「Emulate a focused page」選項，這樣即使你與 DevTools 互動，頁面也會保持聚焦狀態。

2. 開啟命令選單，執行「Show Rendering」命令，在DevTools底部開啟「Rendering」抽屜。在抽屜中向下捲動，找到「Emulate a focused page」選項並勾選它。

使用日誌斷點

如果你習慣使用 console.log() 來偵錯程式碼，那麽現在有一個更優雅的方法可以在控制台中檢視日誌輸出，可以避免在程式碼中添加大量的 console.log() 語句。特別是在偵錯生產程式碼時，這一方法格外有用。

對於 Chromium 瀏覽器，可以在「Sources」面板中開啟指令碼，然後右鍵點選想要記錄日誌的行號，並選擇「Add logpoint…」。在彈出的視窗中，輸入想要在控制台中顯示的訊息，並插入想要記錄的變量。這樣，當程式碼執行到這一行時，相應的日誌資訊就會出現在控制台中，而無需修改原始程式碼。

模擬可折疊裝置

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

在Chromium瀏覽器中，可以進入裝置仿真模式並選擇可折疊裝置。一旦選中，工具列上將會出現額外的按鈕。透過這些按鈕，可以輕松切換豎屏和橫螢幕模式，或者切換到單屏和雙屏模式，從而檢視網站在不同布局下的外觀。

自動完成樣式

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

切換顏色格式

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

捕獲高分辨率截圖

如果你無法存取高分辨率裝置，通常需要借助瀏覽器擴充套件、第三方服務或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」以捕獲整個頁面的高畫質截圖。

檢查事件流

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

不過，在Chromium瀏覽器中，你依然能夠輕松地檢查傳入的事件流。只需開啟對應的請求，然後導航至「EventStream」分頁即可。此外，這個分頁還會捕獲伺服器透過XHR和Fetch發送的事件，讓你能夠全面了解事件流的動態。與網路面板類似，還可以使用正規表式來過濾流，或清除表格中的項。

檢視和復制樣式更改

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

在Firefox中 ：只需在「Rules」面板中對CSS聲明進行所需調整，然後開啟「Changes」索引標籤，即可快速檢視所有已變更樣式的差異。點選「Copy All Changes」按鈕，即可一鍵復制這些修改過的樣式，之前的聲明會自動以註釋形式保留，方便對比和整合。

即時運算式

如果你經常需要在控制台中重復輸入相同的JavaScript運算式，那麽即時運算式功能將大大簡化你的工作流程。這一功能類似於偵錯程式中的監視功能，能夠即時計算你在與網頁互動時所使用的運算式值。

在 Chromium 瀏覽器中，只需點選控制台中的眼睛圖示，即可輕松建立一個即時運算式。隨後將出現一個文字域供你輸入運算式。只需在文字域中輸入運算式，然後按下 Enter 鍵，即可即時檢視計算結果。

偵錯水平捲軸

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

在 Firefox 的「Inspector」面板中，系統會自動為具有捲軸的元素添加 scroll 標識。只需點選這個標識，Firefox 就會立即高亮顯示那些導致容器產生捲軸的元素，並為其加上 overflow 的標識。

往期回顧