Chrome Dev Tools---[基礎篇]

張偉傑發表於2017-11-13
Chromedev

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: 獲取響應資料的時間.

相關文章