6月安卓手機(jī)好評(píng)榜：魅族20 Pro蟬聯(lián)冠軍
性能榜和性價(jià)比榜之后，我們來(lái)看最后的安卓手機(jī)好評(píng)榜，數(shù)據(jù)來(lái)源安兔兔評(píng)測(cè)，收集時(shí)間2023年6月1日至6月30日，僅限國(guó)內(nèi)市場(chǎng)。第一名：魅族20 Pro好評(píng)率：95%5月份的時(shí)候魅族20 Pro就是
大家好，我是 CUGGZ。
今天來(lái)分享一些不太常用，但是非常實(shí)用的前端調(diào)試技巧，希望對(duì)你有所幫助！
你是否曾經(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 中啟用此功能，有兩種方法：
如果你習(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”即可。
近年來(lái)，可折疊設(shè)備成為市場(chǎng)上的新寵。但由于它們具有兩個(gè)由縫隙分隔的屏幕，因此在可折疊屏幕上，應(yīng)用可能與在單屏設(shè)備上看起來(lái)有所不同。為了提供更出色的用戶體驗(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)站在不同布局下的外觀。
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ì)看到一條白線，它標(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瀏覽器中，操作步驟如下：
? 中的 Add device pixel ratio 選項(xiàng)。
在Firefox中：
如果你的 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)。
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”面板以查看差異。
如果你經(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 即可。
在前端開(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í)。
本文鏈接：http://m.www897cc.com/showinfo-26-83985-0.html這幾個(gè)前端調(diào)試技巧你可能沒(méi)用過(guò)，但超級(jí)實(shí)用！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)