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

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

我們來看一下。

1.添加條件斷點

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

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

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

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

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

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

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

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

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

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

4.快速切換主題顏色

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

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

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

對于同一個請求，有時需要修改輸入參數并重新發(fā)送，什么是捷徑？

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

• 選擇Network面板。
• 單擊Fetch/XHR。
• 選擇要重新發(fā)送的請求。
• 選擇 Copy as fetch 面板。
• 修改輸入參數并重新發(fā)送。

6. 復制 JavaScript 變量

我們如何將復雜的數據復制到剪貼板？

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

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

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

通過 Elements 面板選擇 DOM 元素。

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

8.捕獲全尺寸屏幕截圖

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

功能強大的 Chrome 瀏覽器可以輕松做到這一點。

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

哇，這太酷了！！！

現在，有一個新問題，如果我們只想截取部分截圖頁面，我們應該做什么？

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

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

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

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

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

我們看一下這個場景，我們對字符串進行了各種操作，然后我們想知道每一步的結果，我們應該怎么做呢？

'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

更簡單的方法

使用“$”獲取上一次操作的結果，無需每次都復制。

// 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 在控制臺中選擇當前頁面的元素是最常見的需求，但是有點太長了，我們可以使用 $ 和 $$ 來代替。