Chrome 92——devtools新特性

Chrome6周發(fā)布一個(gè)新版本，前幾天發(fā)布了第92版，我們來看看有些什么新特性吧！

CSS Grid editor

grid布局的元素可以在style里面手動(dòng)修改屬性。

css grid editor

點(diǎn)擊display：grid后面的圖標(biāo)，可以看到部分grid的布局屬性，切換屬性能夠直接應(yīng)用到元素上。

console中const二次聲明

以前在console中寫一段腳本，定義了一個(gè)const變量，運(yùn)行之后，如果再次運(yùn)行這個(gè)腳本，就會(huì)提示：

Identifier has alreay been declared

經(jīng)常在調(diào)試的時(shí)候被這個(gè)打斷，需要重新刷新一下頁面，才可以再次執(zhí)行腳本?，F(xiàn)在可以直接執(zhí)行了，不會(huì)報(bào)錯(cuò)，在Snippets中運(yùn)行也是一樣的香哦！

redeclaration of const

查看元素原始順序

html中的元素寫的順序有時(shí)可顯示的順序不一致，chrome增加了顯示和元素的順序的關(guān)聯(lián)，可以在Accessibility中勾選Show Source Order來查看元素的原始順序。

show source order

當(dāng)點(diǎn)擊到父元素的時(shí)候，可以看到子元素上出現(xiàn)了序號(hào)。

模擬聚焦

在之前調(diào)試類似搜索框的時(shí)候，輸入了文字，然后在出現(xiàn)的選項(xiàng)中選擇inspect來檢查元素，下拉框會(huì)消失，有些網(wǎng)站下拉框消失的時(shí)候，元素也會(huì)消失，這就導(dǎo)致了無法調(diào)試模糊匹配出來的下拉框，例如：

在網(wǎng)站搜索框輸入關(guān)鍵字，出現(xiàn)了匹配的搜索結(jié)果，然后右鍵選中其中一個(gè)，在dom中查看這個(gè)元素。

輸入關(guān)鍵字

模糊匹配的結(jié)果消失了

可以看到此時(shí)，模糊匹配的搜索結(jié)果消失了，dom元素也跟著消失了。

現(xiàn)在chrome 92默認(rèn)支持“模擬聚焦”的功能，即便檢查元素，也不會(huì)導(dǎo)致元素消失：

模擬聚焦

對(duì)于前端調(diào)試來說，又是一個(gè)福音！?。?/p>

其實(shí)這個(gè)設(shè)置是可以打開或者關(guān)閉的，在devtools打開“Run Command”面板（可以在設(shè)置