Chrome瀏覽器，作為前端開發(fā)者最親密的伙伴，相信你一定不陌生。我們可以用它來查看網(wǎng)絡(luò)請求、分析網(wǎng)頁性能、調(diào)試最新的 JavaScript 功能……

除了這些，它還提供了很多強(qiáng)大但不常見的功能，可以大大提高我們的開發(fā)效率。

我們來看一下。

1.添加條件斷點(diǎn)

通過下面的代碼，我們希望食物的名字是?? 當(dāng)斷點(diǎn)被觸發(fā)時，我該怎么做呢？

const foods = [
  {
    name: '??',
    price: 10
  },
  {
    name: '??',
    price: 15
  },
  {
    name: '??',
    price: 20
  },
]
foods.forEach((v) => {
  console.log(v.name, v.price)
})

在數(shù)據(jù)量很大的情況下，使用條件斷點(diǎn)對開發(fā)工作很有幫助，大大提高效率。

2.在控制臺使用`$I`安裝npm包

有時候想用day.js或者lodash之類的API，又不想去官網(wǎng)查。如果你可以直接在控制臺上嘗試它會很好。

• 安裝控制臺導(dǎo)入器插件
• $i('name') 安裝 npm 包

3. 重新發(fā)送 XHR 請求

我們在工作中經(jīng)常需要和后端開發(fā)人員一起調(diào)試接口。使用這個功能可以提高我們的對接效率。

只需要執(zhí)行以下步驟：

• 選擇Network面板
• 點(diǎn)擊Fetch/XHR
• 選擇你要重新發(fā)送的請求
• 右鍵單擊并選擇重播XHR

4.快速切換主題顏色

有人喜歡chrome的白色主題，也有人喜歡黑色，我們可以通過快捷鍵在兩個主題之間快速切換。

• cmd + shift + p 執(zhí)行命令命令
• 輸入“切換到深色主題”或“切換到淺色主題”來切換主題

5.在控制臺快速發(fā)送請求

對于同一個請求，有時需要修改輸入?yún)?shù)并重新發(fā)送，什么是捷徑？

只需要執(zhí)行以下步驟：

• 選擇Network面板。
• 單擊Fetch/XHR。
• 選擇要重新發(fā)送的請求。
• 選擇 Copy as fetch 面板。
• 修改輸入?yún)?shù)并重新發(fā)送。

6. 復(fù)制 JavaScript 變量

我們?nèi)绾螌?fù)雜的數(shù)據(jù)復(fù)制到剪貼板？

太奇妙了，您可以使用 Chrome 瀏覽器提供的復(fù)制功能來完成。

7. 在控制臺中獲取選中的 DOM 元素

當(dāng)我們通過“元素”面板選擇一個元素時，如果我們想通過 JavaScript 打印它的一些屬性，比如寬度、高度、位置等，我們應(yīng)該怎么做？

通過 Elements 面板選擇 DOM 元素。

使用 $0 訪問控制臺中的元素。

8.捕獲全尺寸屏幕截圖

如果我們要對一個多屏的頁面進(jìn)行截圖，有什么好的辦法嗎？

功能強(qiáng)大的 Chrome 瀏覽器可以輕松做到這一點(diǎn)。

• 準(zhǔn)備你要捕獲的頁面的內(nèi)容
• CMD + Shift + P 執(zhí)行命令
• Enter 捕獲全尺寸屏幕截圖并按 Enter

哇，這太酷了?。?！

現(xiàn)在，有一個新問題，如果我們只想截取部分截圖頁面，我們應(yīng)該做什么？

也很簡單，在第三步輸入“捕獲節(jié)點(diǎn)截圖”即可。

9.展開所有子節(jié)點(diǎn)

如何一次展開 DOM 元素的所有子節(jié)點(diǎn)？不是一個一個嗎？

你可以使用“元素”面板中的組合鍵“Alt + 單擊”一次展開所有子節(jié)點(diǎn)。

10.使用“$”引用上次執(zhí)行的結(jié)果

我們看一下這個場景，我們對字符串進(jìn)行了各種操作，然后我們想知道每一步的結(jié)果，我們應(yīng)該怎么做呢？

'fatfish'.split('').reverse().join('')

你可能會做這樣的事情

// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

更簡單的方法

使用“$”獲取上一次操作的結(jié)果，無需每次都復(fù)制。

// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
$_.join('') // hsiftaf

11.使用“$”和“$$”快速選擇DOM元素

使用 document.querySelector 和 document.querySelectorAll 在控制臺中選擇當(dāng)前頁面的元素是最常見的需求，但是有點(diǎn)太長了，我們可以使用 $ 和 $$ 來代替。