【譯】12個Chrome DevTools小技巧

zhCN_超發表於2018-04-03

【譯】12個Chrome DevTools小技巧

本文采用意譯,這是原文

1.元素拖拽

Elements皮膚,你可以對元素進行任意拖拽操作

【譯】12個Chrome DevTools小技巧

2.獲取當前選中元素

Elements皮膚選中一個元素之後,在Console中輸入$0可以獲取到選中元素的引用

如果你使用jQuery,那麼輸入$($0),可以獲取當前元素的jQuery物件並使用相關API

【譯】12個Chrome DevTools小技巧

3.在Console皮膚中使用最近一次操作值

Console皮膚中,使用$_變數引用上一次操作返回值

【譯】12個Chrome DevTools小技巧

4.新增樣式和改變狀態

Elemetns皮膚的Styles皮膚中,有兩個很有用的按鈕

第一個,你可以為你選擇的元素新增新樣式

【譯】12個Chrome DevTools小技巧

第二個,如果選擇元素樣式有偽類,你可以任意觸發它的偽類樣式

【譯】12個Chrome DevTools小技巧

5.改變樣式並儲存

Elemetns皮膚的Styles皮膚中,你可以對選擇的元素樣式進行修改,然後點選檔名,進行儲存操作

這個技巧不適用於使用了+選擇器和element.style樣式內容

【譯】12個Chrome DevTools小技巧

6.為選中的元素截圖

Elements標籤中,選擇一個元素,按下cmd-shift-pwindows則為ctrl-shift-p)組合鍵,搜尋並選擇Capture node screenshot進行儲存操作

【譯】12個Chrome DevTools小技巧

7.使用CSS選擇器查詢元素

Elements皮膚中,按下cmd-fwindows則為ctrl-p)組合鍵,顯示查詢框

你可以輸入字串去在整個頁面查詢,或者輸入css選擇器去查詢

【譯】12個Chrome DevTools小技巧

8.Console的程式碼換行

Console皮膚中除錯多行程式碼時,使用shift-enter組合鍵進行換行,enter鍵將直接執行程式碼

【譯】12個Chrome DevTools小技巧

9.定位

在偵錯程式皮膚中:

  • cmd-owindows則為ctrl-o)組合鍵,會列出當前頁面載入的資源,選擇即定位該資源
  • cmd-shift-owindows則為ctrl-shift-o)組合鍵,會列出當前選中檔案的符號列表(屬性,方法,類等等)
  • ctrl-g對當前選中檔案程式碼行進行定位

【譯】12個Chrome DevTools小技巧

10.監聽表示式

把需要監聽的變數新增至監聽表示式列表中,避免在程式中反覆的console.log同一個變數進行debug

【譯】12個Chrome DevTools小技巧

11.XRH/Fetch除錯

找到並開啟XHR/Fetch Breakpoints皮膚,新增需要攔截的請求url

【譯】12個Chrome DevTools小技巧

12DOM除錯

Elements皮膚中,對選中的元素右鍵,啟用Break on -> subtree modifications,任何改變該元素子節點內容的js操作將會被攔截

【譯】12個Chrome DevTools小技巧

相關文章