Chrome DevTools調試技巧

【1】DevTools觸發僞類

右鍵單擊Elements面板中的元素節點並選擇「 force state 」。或者在Sytle子窗格中單擊「：hov 」圖標。能夠觸發元素上的僞類來研究元素在懸停時的效果和樣式

​

【2】DevTools-在任何網頁上運行預約義的代碼片斷

DevTools中有一個叫作代碼段的特性，它容許您能夠在網頁上運行的測試代碼(這比在控制檯面板中從新鍵入JavaScript代碼要方便一些)

1. 單擊Sources，左側小窗口選擇snippets
2. 單擊New snippet 新建
3. 輸入文件名和須要測試的代碼片斷
4. 右擊文件並選擇Run(或Ctrl/Cmd+Enter)
5. 單擊Console查看代碼運行結果

​

【3】使用CSS選擇器搜索DevTools-DOM樹

當使用Elements面板瀏覽DOM時，嘗試經過CSS選擇器搜索節點。

​

【4】DevTools-轉到特定列的行號

1. 打開Sources面板中的文件, 按快捷鍵ctrl + o
2. 輸入：5：20 Enter
3. 請注意，您被帶到了第5行第20欄！

​

【5】DevTools- Ctrl+單擊能夠在Sources面板中添加多個遊標

​

【6】快速編輯HTML元素標記

您能夠雙擊Elements面板中節點的開始標記來編輯它，結束標記將隨着您的更改而自動更新。

​

【7】ALT+單擊能夠展開全部子節點

在Elements面板中,使用Alt+單擊能夠展開該Dom節點下的全部Dom子節點

​

【8】在任何節點上顯示該節點綁定的事件

​

【9】擴展CSS縮寫屬性

在Style窗格中，能夠展開css縮寫屬性，如background或padding，並查看爲您定義的所有屬性

​

【10】將元素滾動到視圖中

1. 右擊Elements面板中的DOM節點。
2. 選擇 Scroll into view

​

【11】ctrl+d 選擇下一個相同的單詞

在Sources面板編輯器中，可使用ctrl + d 選擇多個相同的單詞作操做

​

【12】添加一個新的自定義維度設備做爲預置

​

【13】DOM的改進麪包屑線索

Elements元素面板中有一個

麪包屑痕跡，

它能夠幫助您在瀏覽DOM時跟蹤您的步驟。

​

【14】netWork網絡請求過濾器

• larger-than:100將 查找大於100個字節的資源並進行篩選。
• 您能夠經過在查詢前面加上「-」來否認查詢。例如：-larger-than:50K找到如下資源
  不
  大於50K。
• status-code: 200若要查找具備狀態代碼響應的資源，請執行如下操做200
• mime-type 查找請求資源類型

​

【15】在DevTools控制檯面板中編輯HTML

​

【16】從DevTools生成的調色板中選擇一個新的顏色

​

【17】DOM屬性中的增量和遞減數

可使用鍵盤上/下箭頭修改DOM屬性或樣式的數量值

​

【18】使用樣式規則工具欄增長常見樣式

​

【19】經過控制檯更好地記錄對象和數組

​

【20】經過控制檯瞭解JS代碼的速度

console.time和console.timeEnd這兩個方法能夠用來讓WEB開發人員測量一個javascript腳本程序執行消耗的時間。console.time方法是開始計算時間，console.timeEnd是中止計時，輸出腳本執行的時間。這兩個方法中均可以傳入一個參數，做爲計時器的名稱，它的做用是在代碼並行運行時分清楚各個計時器。測試代碼寫在這兩個方法之間。

​

【21】使用切換元素類功能進行即時視覺反饋

在樣式窗格中，單擊.cls標籤，可顯示隱藏Dom元素的類名

​

【22】DevTools黑色主題

​

【23】在沒有瀏覽器擴展的狀況下捕獲全尺寸屏幕截圖

在控制檯中按快捷鍵Ctrl + Shift + p進入命令菜單再輸入screenshot

​

【24】用DevTools實現JavaScript代碼庫的現代化

新的「copy for fatch」功能擴展了NetworkPanel上下文菜單,右擊網絡請求，而後以curl形式複製。用FETCH API替換代碼庫中現有的Ajax調用。若是要驗證剪貼板中的FETCH API調用，能夠將其粘貼到控制檯面板中，並在其前綴加上await

​

【25】查看WebSocket消息

​

【26】console.dir顯示一個對象全部的屬性和方法

若是說你想要查看Dom節點所關聯到的真實的Javasript對象，而且想要查看他的屬性就可使用console.dir

​

【27】經過h來隱藏

能夠按下h來隱藏在元素面板中被你選中的元素。再次按下h使它出現。某些時候這是頗有用的，例如你想截圖，可是又不想裏面包含一些敏感信息。

​

【28】隱藏netWork請求的時間軸

若是你僅僅只是查看請求列表- 來確認狀態，大小和響應，那麼你能夠選擇隱藏請求的時間軸，由於它佔了你將近一半的空間

​

【29】Console的代碼換行

在Console面板中調試多行代碼時，使用Shift + Enter組合鍵進行換行，Enter鍵將直接執行代碼

​

【30】DOM 斷點調試

基本上你們都會用JavaScript的斷點調試，可是應該不少人不知道Dom節點也能夠進行斷點調試，DevTools提供了三種針對Dom元素的斷點調試：子元素改變時、屬性改變時 和元素被移除時。

1. 在Elements 標籤頁，選中一個元素
2. 右擊，選擇 Breakon->subtree modifications(子元素改變時斷點)、attribute modifications （屬性改變時斷點）、node removal（元素被移除時斷點）

​

【31】緩存上一步操做的結果$_

在DevTools上運行JavaScript表達式的時候，可使用$_來獲取到上一步操做的返回值。

​

【32】console中的 $0-$4

在Elements面板中，

$0

是當前咱們選中的html節點的引用。理所固然， $1 就是咱們上一次選擇的節點的引用， $2 是在那以前選擇的節點的引用，一直到 $4

​

【33】選擇dom節點$和$$

若是你沒有在App中定義過 $ 變量 (例如JQ)的話，它在console中就是對這一大串函數document.querySelector的別名。

若是是 $$ 就更加厲害了，還能節省更多的時間，由於它不只執行document.querySelectorAll而且它返回的是一個節點的數組

​

參考文獻：umaar.com/dev-tips/