Chrome Dev Tools---[基礎篇]

Chrome Dev Tools 是每一位前端工程師開發調試的必備利器，稱之爲FE的瑞士軍刀也毫不爲過。然而，每每當發現一些自己不知道的用法時，我們經常會覺得，自己只是掌握了其強大功能的九牛一毛。爲了能夠讓她發揮出最大功效，首先，我們應當瞭解她更多的使用方法；然後，在開發中合適的場景下，刻意練習使用；最後，熟練掌握那些之前不瞭解的功能，併爲我所爲用，最大提升效率。

本文翻譯自谷歌官方文檔，主要介紹了Elements, Console, Sources, Network四個Tab頁面下的功能。敬請期待Chrome Dev Tools 性能篇

Elements

• 進入：

  1. Cmd + Alt + c inspect，點擊想觀察的節點
  2. console中inspect(DOM)，DOM爲想觀察的節點。

• 遍歷節點：

  1. 鼠標點擊
  2. 在DOM節點中，上下箭頭跳轉，向右箭頭，展開摺疊的節點。向左箭頭，摺疊打開的節點。

• 編輯節點
  F2 -> Edit as HTML. ctrl+enter保存更改，Esc退出更改，不保存.

• 編輯 DOM 節點名稱或屬性

  1. 直接在節點名或屬性上雙擊
  2. 選中突出節點，Enter,然後Tab選擇.
  3. 右鍵,Edit/Add Attribute.

• 點擊並拖動,可以移動DOM節點.

• 右鍵->Scroll into view,滾動頁面使節點在視口中顯示.

• 斷點調試

  1. 右鍵節點->break on，可以對該節點的子樹修改、屬性修改、節點移除三種事件添加斷點
  2. 右側DOM Breakpoints,管理DOM斷點.
  3. Event Listener
     1. Ancestors 顯示祖先節點的事件偵聽器。
     2. 每個Event Listener包含兩個屬性
        • handler, 右鍵 -> Show Function Definition
        • useCapture, addEventListener函數中useCapture的值(bool).
        • Framework listeners, 框架事件監聽器.

• Styles，位於面板左側，主要是樣式相關內容

  • 頁面底端的Computed 可以編輯，修改。
  • 點擊Styles中的文件名->跳轉到Source->右鍵，Local Modifications.
  • Inherited from <NODE>,點擊<NODE>可以跳轉到該DOM節點。
  • 灰色條目不是已定義規則，而是在運行時計算的規則。
  • 鼠標懸停在 CSS 選擇器上可以查看受該選擇器影響的所有元素。
  • 點擊右上角.cls,可以查看、增加、刪除class。
  • 點擊(並長按)右上角+按鈕，(選擇要向哪一個樣式表)添加一個新的 CSS 規則。
  • 點擊右上角:hov，或在元素上點擊右鍵，啓用/刪除僞類。
  • 點擊css屬性進行修改，tab跳轉；Alt/ /Shift/Shift+Fn + 上/下，增減0.1,1,10,100。
  • 鼠標懸停到樣式表上面，此時右下角出現三個點，移動過去，此時有color,background-color等快捷方式。
  • 點擊color聲明左側帶顏色的小正方形，打開color-picker。

Console

• 進入: Cmd + Alt + J
• 編輯時，輸入Shift + Enter實現換行，而不會直接運行。
• Settings -> General -> Console ->
  • Hide network messages/ Log XMLHttpRequests/ Preserve log / Enable custom formatters
  • Show timestamps 展開消息堆疊.

Console API

• Ctrl + L/ clear() /console.clear() 清空console.
• 右鍵 -> Save As 保存console輸出.
• 日誌組按組輸出,可嵌套:

  console.group("Group Name")
  console.groupCollapsed("Group Name")//默認摺疊
  console.groupEnd()
  

• 計時器,時間戳,在Timeline上有標註

  console.time("name");
  console.timeEnd("name");
  // 向Timeline添加一個標記
  console.timeStamp("Adding result");
  

• 斷言,在console中可跳轉到代碼對應位置.

  console.assert(a < 500, "a > 500!");
  

• 堆棧追蹤&&錯誤處理

  // 追蹤堆棧
  try {
      // some code here
  } cache(e) {
      console.log(e.stack);
  }
  // 打印跟蹤調用棧
  console.trace();
  // 處理運行時異常
  window.onerror = function(message, url, line){
      console.log("window.onerror was invoked with message = " + message + ", url = " + url + ", line = " + line);
  }
  

• 字符串替換 %s %d %f %o(DOM節點) %O(js對象) %c 樣式。不過有了ES6以後，推薦使用更加方便、靈活的模板字符串
• 添加cpu配置文件.將會添加到Profiles面板中

  console.profile("label");
  console.profileEnd();
  

• 其他特殊用法

  // DOM元素格式化爲JS對象
  console.dir(document.body);
  // 輸出object子級元素xml
  console.dirxml(object);
  
  // 將Object,Array輸出
  console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
  console.table([[1,2,3], [2,3,4]]);
  console.table(family, ["firstName", "lastName", "age"]);
  
  // 記錄相同字符串傳入的次數(多用於統計函數調用次數)
  console.count("Login called for user " + user);
  

Command Line API

• ↑ / ↓切換查看表達式

• 選擇元素

  $('code') // document.querySelector()
  $$('figure') // document.querySelectorAll()
  $x('html/body/p') // 返回與指定xpath匹配的數組元素
  $0 - 4 // 返回最近訪問過的5個元素,$0爲最新的一個
  

• 監聽事件, 查看時間監聽器(Elements->Event Listener中也可以查看)

  monitorEvents(document.body, "click"); // 監聽事件
  unmonitorEvents(document.body); // 取消監聽
  getEventListeners(document); // 返回在指定對象上註冊的事件偵聽器
  

• 複製:將指定對象的字符串表示形式複製到剪貼板.

  copy(object);
  copy($0);
  

• 調試函數

  debug(fn); // 調用fn時開始調試
  undebug(fn); // 停止調試
  
  monitor(function); // console中將輸出函數調用,以及傳入的參數
  unmonitor(function); // 停止監控
  

• 在Elements中打開指定元素/對象/函數.

  inspect(DOM);
  inspect(object/function);
  

• 查看對象

  keys(object);
  values(object);
  

Sources

• 添加斷點
  • 添加Event斷點:
    Source標籤->右側Event Listener Breakpoints->Mouse->click
  • DOM斷點.Elements 面板中，對DOM節點右鍵，Break On...
  • XHR斷點
  • 異常斷點:右上角Pause on exceptions
  • 條件斷點

  //  當DOM元素滿足某個條件進行斷點，同時查看這個元素
  elem.hasAttribute('class') && inspect(elem);
  

• 在編輯器中行首右鍵,continue to here
• 檢測變量值
  • Watch->+,添加希望檢測的表達式,比如,a,typeof a
  • Scope窗格,在腳本暫停時,會顯示當前變量
• 右上角Deactivate breakpoints,啓動/忽略全部斷點
• Call Stack調用堆棧
  • 在Call Stack中右鍵,Restart Frame
  • Async,提高完整的異步函數調用堆棧的可視性
  • 使用非匿名函數,提高堆棧可讀性
• 將第三方腳本添加入黑箱:
  • 在已打開的文件中,右鍵->Blackbox Script
  • 在Call Stack中,右鍵->Blackbox Script
  • Settings->Blockboxing->add pattern,下拉菜單中,Blackbox黑箱,Disabled阻止執行
• 實時編輯:編輯器中修改代碼->Cmd + s，繼續運行代碼
• Threads,切換線程
• Source Map, Settings中開啓
• Snippets 編寫代碼，運行結果輸出到console

Network

• 面板中，藍線標誌DOMContentLoaded事件，紅線標誌load事件。
• Http1.0/1.1下,chrome最多支持對同一個domain6個TCP請求
• Shift + 光標移動到request上面，此時綠色標誌該請求的發起者，紅色標誌該請求的依賴項。
• 攝像機按鈕，Capture Screenshots，再次刷新頁面時，可以在時間軸上方看到對應屏幕狀態。
• disable cache,throttle,Offline,hide data urls
• 右鍵->clear browser cache
• 右鍵表格header -> 添加/移除顯示列
• header:Use large request rows,Show overview
• 右鍵request->copy response->console中copy({})->得到格式化的JSON
• • 右鍵request->block request 在drawer中,查看被block的request
• 右鍵XHR request -> reply XHR
• Summary: request數量,大小,時間
• Filter
  • 空格隔開:並
  • domain,has-response-header,is(is:running),larger-than,method,mime-type,mixed-content,scheme,set-cookie-domain,set-cookie-name,set-cookie-value,status-code
• Timing含義:
  Queuing: 排隊時間.
  Stalled: http請求建立到發出去.
  Proxy Negotiation、DNS Lookup
  Initial Connection/Connecting: 建立鏈接花費時間。TCP握手移機重試.
  SSL: 建立SSL鏈接花費時間.
  Request sent: 發起請求的時間.
  Waiting (Time to first byte (TTFB)): 發起請求到接受第一個字節數據.
  Content Download: 獲取響應數據的時間.