瀏覽器DevTools使用技巧

袋鼠雲數棧前端 發表於 2022-12-06

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式資料中臺產品。我們始終保持工匠精神,探索前端道路,為社群積累並傳播經驗價值。

本文作者:正則

作為一名前端開發人員,平時開發中使用最多的就是 Chrome devtools,但可能很多同學像我一樣平時用的最多也就 Console、Elements 和 Network 皮膚了。除了我們常用的一些功能,它還提供了很多強大但我們不太常見的功能,這些功能可以大大提高我們的開發效率。下面我們就來了解一下。

使用Chrome的截圖工具

進行網頁截圖,一般情況我們都使用的是第三方工具,但其實 Chrome 已經為我們提供了截圖功能。使用Command+SHIFT+P(MAC)/CTRL+SHIFT+P(Window)開啟命令選單,輸入框中輸入“capture”會自動聯想到截圖命令。

file

  • Capture area screenshot

    自定義截圖區域,與常用的截圖工具類似

  • Capture full size screenshot

    擷取html完整渲染圖

  • Capture node screenshot

    擷取某個 DOM 節點的渲染圖,使用前需要先在 Elements 下選中節點,也可以選中節點後,點選右鍵選中選單中的 Capture node screenshot

  • Capture screenshot

    擷取瀏覽器視窗內的區域

flex 除錯皮膚

對使用了 flex 佈局的元素,點選 display: flex 右側的按鈕,就會出現 flex 除錯皮膚,可以直觀的修改 flex 相關樣式,便於進行樣式除錯。

file

Console皮膚相關

$0、$1、$2、$3、$4

$0 是對當前在 Element 皮膚中選中的 html 節點的引用,$1是對上一次選擇節點的引用,以此類推直到$4,透過$的引用可以讀取 DOM 節點的一些屬性。

file

$ 和 $$

$ 等價於 document.querySelector()

$$ 等價於 document.querySelectorAll()

file

$_

$_為對上次輸出結果的引用

file

console.table

console.table 可以將陣列或物件以 table 方式展示,同時也可以展示物件屬性。console.table 接受兩個引數,第一個為要現實的資料,第二個引數為包含列名稱的陣列。

file

time 與 timeEnd

console.time 與 console.timeEnd,兩個方法配合計算並列印程式碼執行時間。

file

在控制檯快速傳送請求

在平時的介面除錯中,對於同一個介面,我們有時需要修改傳入引數並重新傳送,對於有些請求可以重新整理下頁面或者重新操作下即可重新傳送,如果對於一個大型表單輸入引數傳送請求並且進行了頁面跳轉後,還需要再次除錯,針對這樣的場景,再次去輸入表單去重新傳送請求顯然效率是非常低的,那有什麼捷徑呢?
在 Chrome 中我們可以進行以下操作:

  1. 開啟 Network 皮膚,選中 Fetch/XHR;
  2. 選擇要重新傳送的請求,單擊右鍵選擇 Copy,選中 Copy as fetch;
  3. 進入 Console 貼上,修改輸入引數並重新傳送。

file

在 Edge 瀏覽器中除了使用 Chrome 中的方法外,還可以使用 Network Console 進行重新請求,具體操作如下:

  1. 選擇要重新傳送的請求,單擊右鍵選擇 Edit and Resend;
  2. 進入 Network Console 皮膚,修改引數後點選 send 即可傳送請求。

file

使用 Import HAR file / Export HAR file 復現網路請求

file

在 Network 皮膚上分別有 Import HAR file 和 Export HAR file 按鈕,點選 Export HAR file 按鈕會匯出har檔案,檔案中儲存了瀏覽器與伺服器互動的一些資料,我們可以在任意瀏覽器頁面中點選 Import HAR file 匯入 har 檔案復現當時的請求。

file

使用場景:當在客戶環境我們不方便直接訪問,假如由於網路問題或傳參問題等問題導致介面報錯問題時,我們可以透過匯出 har 檔案,在我們本地復現當時的網路請求狀況。

條件斷點

當清晰知道要除錯的範圍,且只除錯某指定條件分支下使用,當滿足條件時,斷點才會生效。
使用方法:在行號處點選 Add Conditional Breakpoint...,即可新增程式碼行條件斷點。

file

事件斷點

如果對程式碼不熟悉或者在較長的程式碼邏輯中,只是知道點選觸發業務邏輯時,可以考慮事件監聽斷點。

file

DOM斷點

當 DOM 節點發生變化時新增斷點,會定位到修改 DOM 的那行程式碼。

file

file

說明:

  1. subtree modifications 當前 DOM 子節點有任何變化時觸發斷點
  2. attribute modifications 當前 DOM 本身屬性有任何變化時觸發斷點
  3. node removeal 當前 DOM 節點被移除時觸發斷點

使用 Snippets 編寫程式碼片段

在平時開發中,常常會有些 JS 程式碼需要在瀏覽器中除錯,直接在 console 下寫會比較麻煩,這時可以使用 Chrome 提供的 Snippets 功能。
使用方法:

  1. 在 Sources 下選擇 Snippets,點選 “New Snippet” 按鈕,建立一個新的程式碼片段;
  2. 在程式碼區域輸入程式碼;
  3. 按下“Command+Enter”或者點選右下方按鈕即可執行程式碼。

file

此外也可以使用 Snippets 儲存一些常用的程式碼片段,如防抖、節流、正規表示式等程式碼,這樣每次開啟 Devtools 都能獲取到這些程式碼,而不用去百度。
SnippetsConsole 對比

Snippets Console
跨標籤頁可用 當前標籤頁可用
永久儲存,除非手動刪除 頁面過載後清除

總結

Chrome DevTools提供了更多強大的功能供我們使用,它們可以大大的提高我們的開發效率。以上只是Chrome DevTools裡一小部分使用技巧,更多的使用技巧歡迎大家在評論區補充分享。