no_mkd

Chrome DevTools

小技巧

1.表格視圖

console.table(arr2/obj, [arrColName]); // 以列表形式顯示物件屬性/值或者多維陣列鍵/值

2.計時

console.time/timeEnd(str); // 成對出現，配合使用

3.snippet

可以把自己的偵錯工具庫放進去，非常方便

4.圖片取色

用瀏覽器打開圖片，檢查元素，設置任意色值，用取色器取色

5.常用快捷鍵

Ctrl + Shift + f    跨檔案查找
Ctrl + Shift + o    查找函式定義
Ctrl + p            轉到 Sources 面板
Ctrl + Shift + c    檢查元素
Ctrl + L            跳轉到指定行
ESC                 顯示/不顯示 console
Ctrl + L            清空 console

零.主面板

1.常用功能

模擬設備（橫屏切換），模擬觸摸事件（預設開啟）

2.不常用功能

模擬網路（行動網路效能優化），模擬經緯度、加速度，偵錯媒體查詢

二.Elements

1.常用功能

定位，臨時修改，查看 CSS 規則，事件監聽

2.不常用功能

DOM 中斷點（插入中斷點，子樹更新/屬性值更新/節點移除時觸發，對應 DOM3 級節點更新事件），拖放節點修改 DOM 結構，強制元素顯示 hover/active 等狀態

三.Network

1.網路面板能做什麼

• 哪個資源最晚開始下載？

• 哪個資源下載時耗最長？

• 誰發起了那個網路請求？

• 載入那個元件花了多少時間？

2.常用功能

查看資源載入情況以及資源 URL，偵錯 Ajax（比如打開百度顯示天氣的 xhr），重發 xhr

3.不常用功能

查看 HTTP 請求/回應標頭及主體，評估網路效能（關注時耗）

4.兩條重要的時間線

藍線表示 DOMReady 事件。事件觸發的條件是：瀏覽器已經把整個 HTML 文件的 DOM 結構解析完畢。一般前端開發者監聽這個事件是為了可靠地在文件中查找元素。這個事件觸發之前有可能只下載了半截 HTML，想要的元素還沒出現。

紅線表示 load 事件，觸發條件是：整個頁面的 JS CSS 圖片都下載完畢。使用者看到的進度條已經不再顯示為「忙」的狀態。是使用者眼中的載入完畢。

5.時間記錄（Resource Timing API）

1. 開始

2. 開始重新導向

3. 重新導向結束

4. 開始獲取 app cache

5. 開始 DNS 查詢

6. DNS 查詢結束

7. 開始（安全）TCP 連線

8. TCP 連線結束

9. 開始請求

10. 開始回應

11. 回應結束

可以透過window.performance.getEntries()獲取上面所有數據，頁面中可以直接用（類似於 console 物件）

6.資源詳情

• Stalled/Blocking：發送請求之前的準備，比如 TCP 連線複用（Chrome 支援每個網域有 6 個 TCP 連線），

• Proxy Negotiation：連線代理伺服器的時耗

• DNS Lookup：DNS 查詢時耗（如果瀏覽器沒有快取 DNS 記錄）

• Initial Connection / Connecting：初始化連線的時耗，比如 TCP 建立連線，SSL 連線等等

• SSL：SSL 握手時耗

• Request Sent / Sending：發送請求的時耗

• Waiting (TTFB)：等待回應（的第一個位元組）返回的時耗

• Content Download / Downloading：接收相應數據的時耗

四.Sources

1.常用功能

查看外部檔案原始碼，[條件]中斷點（程式碼行中斷點/事件中斷點）偵錯

2.不常用功能

修改檔案自帶版本控制，格式化被壓縮的程式碼 (這種符號 {})，持久化腳本snippet（多行控制台，支援語法高亮），黑盒腳本（排除不關心的腳本檔案）

3.中斷點類型

• 程式碼行中斷點

• DOM 中斷點（ES5）

  • DOM 子樹更新中斷點

  • 屬性更新中斷點

  • 節點移除中斷點

• XHR 中斷點（攔截對指定 URL 的 xhr）

• 事件監聽器中斷點（監聽指定事件）

中斷點偵錯快捷鍵：F8 單步 F10 步過 F11 步入 Shift+F11 跳出

五.Timeline 渲染速度優化

1.功能

• 詳細時耗圖（結構括資源下載，腳本執行，渲染，重繪等等）

  

  綠色線表示「First Paint」，可能比 DOMContentLoaded 早，Paint 表示 Chrome 請求 GPU 繪製畫面

  

• 檢查記憶體洩漏（強制垃圾回收）

  

  

• 事件時耗分析

  

六.Profile（效能優化）

1.指標

CPU，記憶體占用，腳本執行時耗

2.效能優化能做什麼

• 檢查頁面是不是佔用了太多記憶體

• 檢查記憶體洩漏

• 查看 GC 工作頻率

3.記憶體占用

圖示是一個空白頁面，2M 左右是最小記憶體佔用了

（V8 引擎的 GC 機制不是傳統的引用計數/標記清除，用的是新生代+老生代+晉升機制，新生代採用 Scavenge 演算法（遍歷物件樹），老生代採用標記清除+標記整理）

結合 Timeline 面板檢查記憶體洩漏過程比較麻煩，詳細資訊請查看Chrome Developer Tools 之記憶體分析、[JavaScript Memory Profiling](效能優化/JavaScript Memory Profiling - Google Chrome.html)

還可以檢測 DOM 節點洩漏，算是記憶體洩漏的一種，可能某些時候會出現 DOM 碎片無法回收的情況

4.查看 JS 語句時耗

七.Resources

1.常用功能

cookie

2.不常用功能

localStorage，appCache，Session Storage，IndexedDB，web SQL，Frames（DOM 物件框架層結構，分離 image/html/css/js）

八.Audits 載入速度優化

檢測頁面載入時間，提供優化建議

九.Console

1.常用功能

計算器，測試 JS 程式碼

2.不常用功能

獲取元素資訊（比如所有圖片的 src 或者統計標籤總數），命令列 API（比如 $, $$, $_, $x），console.assert(expr, str);等價於 if (expr) {console.log(str)}`，

十.Settings

禁用 JS，禁用快取

十一.特色功能

特色功能 1：遠端偵錯

Android 與 PC 雙向同步

支援在手機瀏覽器/native app 中偵錯，支援連接埠轉發，支援虛擬主機名映射（virtual host mapping）

準備條件：

1. Chrome 32+

2. Android USB 連線

3. 瀏覽器偵錯需要 Android 4.0+，以及 Android Chrome（PC 的 Chrome 要比 Android 版本高才行）

4. app 偵錯需要 Android 4.4+，以及WebView.setWebContentsDebuggingEnabled(true);

步驟：

1. 開啟 USB 偵錯，手機打開 Chrome 進入需要偵錯的頁面

2. PC 打開 Chrome 進入 chrome://inspect，勾選 Discover USB devices

3. 在設備列表中點擊 inspect 開始遠端偵錯

【華為 4.2.2 Android Chrome 39, 42 PC Chrome 43 測試瀏覽器遠端偵錯失敗，檢測不到設備】

特色功能 2：CSS 預處理

SASS（SCSS），LESS，Stylus

1. 安裝 ruby，gem 安裝 sass 或者 compass

   gem sources --remove https://rubygems.org/

   gem sources -a https://ruby.taobao.org/

   gem sources -l

   gem install sass

   gem install compass

2. 啟用 source map

3. 轉譯 sass，開始偵錯

   sass --watch --scss --sourcemap style.scss:style.css

【注意：watch 效率極低，2 分鐘後才能檢測到變化，重新生成 map】

特色功能 3：工作空間 workspace

把 Chrome 作為 IDE

添加目錄，持久保存，現場修改，程式碼提示、高亮、格式化