大家好，我是 CUGGZ。

今天來(lái)分享一些不太常用，但是非常實(shí)用的前端調(diào)試技巧，希望對(duì)你有所幫助！

• 懸停時(shí)檢查彈出窗口
• 使用日志斷點(diǎn)
• 模擬可折疊設(shè)備
• 自動(dòng)完成樣式
• 切換顏色格式
• 捕獲高分辨率截圖
• 檢查事件流
• 查看和復(fù)制樣式更改
• 實(shí)時(shí)表達(dá)式
• 調(diào)試水平滾動(dòng)條

懸停時(shí)檢查彈出窗口

你是否曾經(jīng)為檢查只在懸停時(shí)出現(xiàn)的彈出元素（如 tooltip、下拉菜單等）而苦惱？這些元素一旦頁(yè)面失去焦點(diǎn)就會(huì)消失，導(dǎo)致檢查變得異常困難。Chromium瀏覽器提供的“Emulate a focused page”功能正是為了解決這個(gè)問(wèn)題，確保在使用 DevTools 時(shí)頁(yè)面保持聚焦?fàn)顟B(tài)。

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

• 在“Elements”面板中選中觸發(fā)彈出元素的項(xiàng)。接著打開(kāi)“Styles”面板，并點(diǎn)擊“:hover”按鈕以激活懸停狀態(tài)。然后，啟用“Emulate a focused page”選項(xiàng)，這樣即使你與 DevTools 交互，頁(yè)面也會(huì)保持聚焦?fàn)顟B(tài)。
• 打開(kāi)命令菜單，運(yùn)行“Show Rendering”命令，在DevTools底部打開(kāi)“Rendering”抽屜。在抽屜中向下滾動(dòng)，找到“Emulate a focused page”選項(xiàng)并勾選它。

使用日志斷點(diǎn)

如果你習(xí)慣使用console.log()來(lái)調(diào)試代碼，那么現(xiàn)在有一個(gè)更優(yōu)雅的方法可以在控制臺(tái)中查看日志輸出，可以避免在代碼中添加大量的console.log()語(yǔ)句。特別是在調(diào)試生產(chǎn)代碼時(shí)，這一方法格外有用。

對(duì)于 Chromium 瀏覽器，可以在“Sources”面板中打開(kāi)腳本，然后右鍵點(diǎn)擊想要記錄日志的行號(hào)，并選擇“Add logpoint…”。在彈出的窗口中，輸入想要在控制臺(tái)中顯示的消息，并插入想要記錄的變量。這樣，當(dāng)代碼執(zhí)行到這一行時(shí)，相應(yīng)的日志信息就會(huì)出現(xiàn)在控制臺(tái)中，而無(wú)需修改原始代碼。

在 Firfox 中，可以在 “Debugger” 面板中使用類(lèi)似的功能，只需找到想要記錄日志的行號(hào)，右鍵點(diǎn)擊，然后選擇“Add log”即可。

模擬可折疊設(shè)備

近年來(lái)，可折疊設(shè)備成為市場(chǎng)上的新寵。但由于它們具有兩個(gè)由縫隙分隔的屏幕，因此在可折疊屏幕上，應(yīng)用可能與在單屏設(shè)備上看起來(lái)有所不同。為了提供更出色的用戶(hù)體驗(yàn)，我們需要充分利用可折疊屏幕周?chē)目臻g，并圍繞雙屏的約束條件來(lái)設(shè)計(jì)網(wǎng)站。幸運(yùn)的是，一些瀏覽器提供了模擬可折疊設(shè)備或雙屏設(shè)備的功能，讓我們能夠更直觀地了解網(wǎng)站在不同模式下的顯示效果。

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

自動(dòng)完成樣式

Chromium瀏覽器具有一項(xiàng)強(qiáng)大的功能：當(dāng)只輸入值時(shí)，DevTools 會(huì)自動(dòng)推薦最匹配的屬性-值對(duì)。比如，只需輸入“bold”，DevTools 就會(huì)推薦“font-weight: bold”作為首選樣式。

在Safari中，即使在聲明中有拼寫(xiě)錯(cuò)誤，網(wǎng)頁(yè)檢查器也會(huì)嘗試模糊匹配，并建議最接近的屬性-值對(duì)。

切換顏色格式

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

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

捕獲高分辨率截圖

如果你無(wú)法訪(fǎng)問(wèn)高分辨率設(shè)備，通常需要借助瀏覽器擴(kuò)展、第三方服務(wù)或Node.js庫(kù)來(lái)捕獲網(wǎng)站的高清截圖。但借助 DevTools，可以直接在瀏覽器內(nèi)為整個(gè)頁(yè)面或視口捕獲高分辨率截圖，無(wú)需額外工具。

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

• 在DevTools中，點(diǎn)擊“Toggle device toolbar”圖標(biāo)（Cmd+Shift+M或Ctrl+Shift+M）進(jìn)入響應(yīng)式設(shè)計(jì)模式。

• 在設(shè)備工具欄中，點(diǎn)擊 ? 中的 Add device pixel ratio 選項(xiàng)。

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

• 點(diǎn)擊 ? 中的“Capture screenshot”選項(xiàng)以獲取當(dāng)前視口的高清截圖，或選擇“Capture full size screenshot”以捕獲整個(gè)頁(yè)面的高清截圖。

在Firefox中：

• 想要捕獲頁(yè)面的高分辨率截圖，可以打開(kāi)Console面板，并運(yùn)行命令:screenshot --dpr 3，這樣就能夠以設(shè)備像素比設(shè)為3的方式獲取截圖。
• 如果希望捕獲整個(gè)頁(yè)面的截圖，只需在命令后添加--fullpage即可。此外，如果想要捕獲某個(gè)可以通過(guò)選擇器標(biāo)識(shí)的節(jié)點(diǎn)的截圖，可以添加--screenshot .header到命令中即可。

檢查事件流

如果你的 Web 應(yīng)用通過(guò)服務(wù)器發(fā)送事件（Server-Sent Events, SSE）從服務(wù)器接收一系列的事件流，你或許需要能夠在 DevTools 中檢查這些傳入的事件流。SSE 的行為與傳統(tǒng)請(qǐng)求-響應(yīng)模式有所不同，因此，在 Network 面板中你只會(huì)看到一個(gè)請(qǐng)求。

不過(guò)，在Chromium瀏覽器中，你依然能夠輕松地檢查傳入的事件流。只需打開(kāi)對(duì)應(yīng)的請(qǐng)求，然后導(dǎo)航至“EventStream”標(biāo)簽頁(yè)即可。此外，這個(gè)標(biāo)簽頁(yè)還會(huì)捕獲服務(wù)器通過(guò)XHR和Fetch發(fā)送的事件，讓你能夠全面了解事件流的動(dòng)態(tài)。與網(wǎng)絡(luò)面板類(lèi)似，還可以使用正則表達(dá)式來(lái)過(guò)濾流，或清除表格中的項(xiàng)。

查看和復(fù)制樣式更改

DevTools 允許你調(diào)整頁(yè)面樣式并實(shí)時(shí)預(yù)覽效果。但逐一識(shí)別并手動(dòng)復(fù)制修改過(guò)的樣式到編輯器中是相當(dāng)?shù)穆闊Ｈ绻愠Ｐ枰诰庉嬈骱?DevTools 間來(lái)回切換以復(fù)制樣式變更，那么這里有一個(gè)更便捷的方法。

在Firefox中：只需在“Rules”面板中對(duì)CSS聲明進(jìn)行所需調(diào)整，然后開(kāi)啟“Changes”選項(xiàng)卡，即可快速查看所有已變更樣式的差異。點(diǎn)擊“Copy All Changes”按鈕，即可一鍵復(fù)制這些修改過(guò)的樣式，之前的聲明會(huì)自動(dòng)以注釋形式保留，方便對(duì)比和整合。

在Safari中：可以在“Styles”面板中對(duì) CSS 聲明應(yīng)用更改，然后點(diǎn)擊“Changes”面板以查看差異。

實(shí)時(shí)表達(dá)式

如果你經(jīng)常需要在控制臺(tái)中重復(fù)輸入相同的JavaScript表達(dá)式，那么實(shí)時(shí)表達(dá)式功能將大大簡(jiǎn)化你的工作流程。這一功能類(lèi)似于調(diào)試器中的監(jiān)視功能，能夠?qū)崟r(shí)計(jì)算你在與網(wǎng)頁(yè)交互時(shí)所使用的表達(dá)式值。

在 Chromium 瀏覽器中，只需點(diǎn)擊控制臺(tái)中的眼睛圖標(biāo)，即可輕松創(chuàng)建一個(gè)實(shí)時(shí)表達(dá)式。隨后將出現(xiàn)一個(gè)文本框供你輸入表達(dá)式。只需在文本框中輸入表達(dá)式，然后按下 Enter 鍵，即可實(shí)時(shí)查看計(jì)算結(jié)果。

實(shí)時(shí)表達(dá)式會(huì)始終顯示在控制臺(tái)的頂部，便于隨時(shí)查看。可以根據(jù)需要添加多個(gè)實(shí)時(shí)表達(dá)式，以便同時(shí)監(jiān)控多個(gè)表達(dá)式的值。此外，如果想輸入多行表達(dá)式，只需按下 Shift+Enter 即可。

調(diào)試水平滾動(dòng)條

在前端開(kāi)發(fā)過(guò)程中，不期望出現(xiàn)的水平滾動(dòng)條常常成為調(diào)試的難點(diǎn)，尤其是當(dāng)需要定位導(dǎo)致溢出的具體元素時(shí)。幸運(yùn)的是， Firefox 提供了獨(dú)特的方法來(lái)輕松識(shí)別這些元素。

在 Firefox 的“Inspector”面板中，系統(tǒng)會(huì)自動(dòng)為具有滾動(dòng)條的元素添加scroll標(biāo)識(shí)。只需點(diǎn)擊這個(gè)標(biāo)識(shí)，F(xiàn)irefox 就會(huì)立即高亮顯示那些導(dǎo)致容器產(chǎn)生滾動(dòng)條的元素，并為其加上overflow的標(biāo)識(shí)。