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 LookupInitial Connection/Connecting: 創建連接花費時間。TCP握手移機重試.SSL: 創建SSL連接花費時間.Request sent: 發起請求的時間.Waiting (Time to first byte (TTFB)): 發起請求到接受第一個字節數據.Content Download: 獲取響應數據的時間.