自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

這幾個(gè)前端調(diào)試技巧你可能沒(méi)用過(guò),但超級(jí)實(shí)用!

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

大家好,我是 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” 面板中使用類似的功能,只需找到想要記錄日志的行號(hào),右鍵點(diǎn)擊,然后選擇“Add log”即可。

模擬可折疊設(shè)備

近年來(lái),可折疊設(shè)備成為市場(chǎng)上的新寵。但由于它們具有兩個(gè)由縫隙分隔的屏幕,因此在可折疊屏幕上,應(yīng)用可能與在單屏設(shè)備上看起來(lái)有所不同。為了提供更出色的用戶體驗(yàn),我們需要充分利用可折疊屏幕周圍的空間,并圍繞雙屏的約束條件來(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中,即使在聲明中有拼寫錯(cuò)誤,網(wǎng)頁(yè)檢查器也會(huì)嘗試模糊匹配,并建議最接近的屬性-值對(duì)。

切換顏色格式

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

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

捕獲高分辨率截圖

如果你無(wú)法訪問(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ò)面板類似,還可以使用正則表達(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)化你的工作流程。這一功能類似于調(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í)。

責(zé)任編輯:姜華 來(lái)源: 前端充電寶
相關(guān)推薦

2020-11-04 10:31:29

Jupyter NotPython數(shù)據(jù)分析

2017-07-26 10:08:06

FABDesign SuppAndroid

2018-09-27 15:58:06

MySQL數(shù)據(jù)庫(kù)性能優(yōu)化

2020-02-03 09:29:32

JavaScript代碼斷點(diǎn)

2021-01-03 16:12:35

Java工具開(kāi)發(fā)

2020-01-17 20:00:25

SQL函數(shù)數(shù)據(jù)庫(kù)

2022-06-08 21:08:22

微信朋友圈

2017-11-06 14:55:53

庫(kù)windows文件歸納

2022-11-29 07:33:15

JavaLombokRecord

2022-07-20 07:29:52

Java

2021-06-24 09:08:34

Java代碼泛型

2024-03-26 00:48:38

2022-04-07 07:36:04

APIJava 8JWT

2012-06-07 16:16:43

JavaScript

2017-03-22 19:52:16

Devops開(kāi)源

2019-06-26 10:10:44

Linux終端命令

2022-09-15 07:05:09

Windows電腦技巧

2020-10-20 18:51:43

C++IDECode

2021-09-30 16:22:34

程序員工具編程

2023-09-26 08:16:25

分布式鎖數(shù)據(jù)庫(kù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)