Chrome DevTools 中你可能不知道的 9 個除錯技巧

前端微志發表於2018-08-15

對於前端開發者來說,ChromeDevTools 絕對是不可或缺的除錯工具,我們常用的除錯方法包含一些console等,而ChromeDevTools 其實很強大,下面來聊聊一些你可能不知道的debug 方法。

Scroll Into View 滾動如檢視內

Elements 標籤中,檢視頁面元素的時候,如果當前這個元素不在檢視內,可以通過這個方法讓這個元素快速滾入檢視中。

操作:

  • Elements 標籤頁中選擇一個不在檢視內的元素
  • 右擊,選擇Scrollintoview

Copy As Fetch 複製為 Fetch

Network 標籤下的所有的請求,都可以複製為一個完整的Fetch 請求的程式碼。

操作:

  • Network 標籤頁中,選中一個請求
  • 右擊,選擇Copy –>Copyasfetch

阻塞請求

Network 標籤頁下,選中一個請求,右擊該請求,選擇Blockrequest domain 或Blockrequest URL,可以分別阻塞該請求所在domain 下的所有請求 和 該請求。

手動給元素新增一個點選事件監聽

debug 的時候,有時候需要在元素的點選事件監聽函式中,將該點選事件物件列印出來。有個更方便的方式,是可以直接在Elements 標籤頁為頁面元素新增事件監聽事件。

操作:

  • Elements 標籤頁中選中一個頁面元素(選中之後,預設可以通過$0 變數獲取到該元素 )
  • Console 標籤頁中,呼叫函式monitorEvents,輸入兩個引數,第一個是當前元素($0),第二個是事件名(click
  • Enter後,當被選中的元素觸發了點選事件之後,Console 標籤頁會將該點選事件物件列印出來

拖動頁面元素

Elements 標籤頁,你可以拖動任何HTML 元素,改變它在頁面中的位置。

操作:如下圖。

DOM 斷點除錯

基本上大家都會用JavaScript 的斷點除錯,但是應該很多人不知道DOM 節點也可以進行斷點除錯。ChromeDevTools提供了三種針對DOM 元素的斷點除錯:子元素改變時屬性改變時 和元素被移除時

操作:

  • Elements 標籤頁,選中一個元素
  • 右擊,選擇 Breakon –> subtree modifications  (或attribute modifications 或node removal )

截圖

在新版本的Chrome 中,提供了一個截圖的API,你可以將整個頁面截圖或者擷取部分頁面元素,且擷取的圖片尺寸跟瀏覽器當前檢視中要擷取的內容所佔尺寸一致。截圖輸出的是png 格式的圖片,會自動通過瀏覽器下載到預設的目錄下。現在有三種擷取的方式:擷取整個頁面部分元素 或當前檢視

擷取頁面部分元素的操作:

  • CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 開啟命令選單
  • Elements 標籤頁,選中要擷取的頁面元素
  • 選擇 Capture node screenshot

擷取完整頁面的操作

  • CMD + SHIFT + P (windows 中用 CTRL + SHIFT + P ) 開啟命令選單
  • 選擇 Capture full size screenshot (不需要選擇頁面元素)

擷取當前檢視內的頁面

  • CMD + SHIFT + P (windows 中用CTRL + SHIFT + P) 開啟命令選單
  • 選擇 Capture screenshot (不需要選擇頁面元素)

快取上一步操作的結果

ChromeDevTools 上執行JavaScript 表示式的時候,可以使用$_ 來獲取到上一步操作的返回值。

Overrides 重寫

ChromeDevTools上除錯css 或JavaScript時,修改的屬性值在重新重新整理頁面時,所有的修改都會被重置。如果你想把修改的值儲存下來,重新整理頁面的時候不會被重置,那就看看下面這個特性(Overrides)吧。Overrides 預設是關閉的,需要手動開啟,開啟的步驟如下。

開啟的操作:

  • 開啟ChromeDevTools 的Sources 標籤頁
  • 選擇Overrides 子標籤
  • 選擇+Selectfolderforoverrides,來為Overrides 設定一個儲存重寫屬性的目錄

小結

ChromeDevTools 中有很多除錯的小技巧,如果細數的話,至少有幾十種。本文限於篇幅,只是列出了一些不容易被發現,且還比較好用的技巧,希望能對你有幫助。

相關文章