11+ chrome高階除錯技巧，學會效率直接提升666%

前端胖頭魚發表於2022-04-11
Chrome高階除錯

也許你我素未謀面，但很可能相見恨晚，我是前端胖頭魚

前言

chrome瀏覽器作為前端童鞋的老婆，相信你一定不陌生。調頁面、寫BUG、畫樣式、看php片少了它整個世界都不香了。

不信？一起來看看我們的老婆有多厲害....

1#. 一鍵重新發起請求

在與後端介面聯調或排查線上BUG時，你是不是也經常聽到他們說這句話：你再發起一次請求試試，我這邊看下為啥出錯了！

重發請求，這有一種簡單到髮指的方式。

  1. 選中Network
  2. 點選Fetch/XHR
  3. 選擇要重新傳送的請求
  4. 右鍵選擇Replay XHR

不用重新整理頁面，不用走頁面互動，是不是非常爽！！！

2#. 在控制檯快速發起請求

還是聯調或修BUG的場景，針對同樣的請求，有時候需要修改入參重新發起，有啥快捷方式？

  1. 選中Network
  2. 點選Fetch/XHR
  3. 選擇Copy as fetch
  4. 控制檯貼上程式碼
  5. 修改引數，回車搞定

曾經我總是通過改程式碼或者手寫fetch的方式處理，想想真是太傻了...

3#. 複製JavaScript變數

假如你的程式碼經過計算會輸出一個複雜的物件，且需要被複制下來傳送給其他人，怎麼辦？

  1. 使用copy函式，將物件作為入參執行即可

以前我總是通過JSON.stringify(fetfishObj, null, 2)列印到控制檯，再手動複製貼上，這效率實在是太低了...

4#. 控制檯獲取Elements皮膚選中的元素

除錯網頁時通過Elements皮膚選中元素後，如果想通過JS知道它的一些屬性，如寬、高、位置等怎麼辦呢？

  1. 通過Elements選擇要除錯的元素
  2. 控制檯直接用$0訪問

5#. 擷取一張全屏的網頁

偶爾我們們也會有對網頁截圖的需求，一屏還好，系統自帶的截圖或者微信截圖等都可以辦到，但是要求將超出一屏的內容也截下來咋辦呢？

  1. 準備好需要截圖的內容
  2. cmd + shift + p 執行Command命令
  3. 輸入Capture full size screenshot 按下回車

如果要擷取選中的部分元素呢？

答案也很簡單，第三步輸入Capture node screenshot即可

6#. 一鍵展開所有DOM元素

除錯元素時，在層級比較深的情況下，你是不是也經常一個個展開去除錯？有一種更加快捷的方式

  1. 按住opt鍵 + click（需要展開的最外層元素）

7#. 控制檯引用上一次執行的結果

來看看這個場景，我猜你也一定遇到過, 對某個字串進行了各種工序，然後我們想知道每一步執行的結果，該咋辦？。

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

你可能會這樣做

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

更簡單的方式

使用$_引用上一次操作的結果，不用每次都複製一遍

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

8.# 快速切換主題

有的同學喜歡chrome的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個主題。

  1. cmd + shift + p 執行Command命令
  2. 輸入Switch to dark theme或者Switch to light theme進行主題切換

9.# "$"和"$$"選擇器

在控制檯使用document.querySelector和document.querySelectorAll選擇當前頁面的元素是最常見的需求了，不過著實有點太長了，我們們可以使用$和$$替代。

10.# $i直接在控制檯安裝npm包

你遇到過這個場景嗎？有時候想使用比如dayjs或者lodash的某個API，但是又不想去官網查，如果可以在控制檯直接試出來就好了。

Console Importer 就是這麼一個外掛，用來在控制檯直接安裝npm包。

  1. 安裝Console Importer外掛
  2. $i('name')安裝npm包

11.# Add conditional breakpoint條件斷點的妙用

假設有下面這段程式碼，我們們希望食物名字是?時才觸發斷點，可以怎麼弄？

const foods = [
  {
    name: '?',
    price: 10
  },
  {
    name: '?',
    price: 15
  },
  {
    name: '?',
    price: 20
  },
]

foods.forEach((v) => {
  console.log(v.name, v.price)
})

這在大量資料下，只想對符合條件時打斷點條件將會非常方便。試想如果沒有條件斷點我們們是不是要點n次debugger？

最後

希望能一直給大家分享實用、基礎、進階的知識點，一起早早下班，快樂摸魚。

期待你在掘金關注我：前端胖頭魚，也可以在公眾號裡找到我：前端胖頭魚。

相關文章