163study

Chrome DevTools 中你可能不知道的 9 個調試技巧

對于前端開發者來說,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 中有很多調試的小技巧,如果細數的話,至少有幾十種。本文限于篇幅,只是列出了一些不容易被發現,且還比較好用的技巧,希望能對你有幫助。

發表我的評論

取消評論
表情 插代碼

Hi,您需要填寫昵稱和郵箱!

  • 必填項
  • 必填項
22选5今晚开奖公告