大體筆記：這裏只羅列出了之前沒有特別熟練的知識點和對平時開發有幫助的點。具體的可以查看網站：
https://www.html.cn/doc/chrome-devtools/console/expressions/
第一部分：一些基礎用法補充
一、概述了面板內容
1、快捷鍵打開控制檯：使用快捷鍵 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)
2、面板包括 元素面板、控制檯、網絡、時間軸、資源、安全面板
二、配置和自定義devtools
1、按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打開命令菜單
2、右上角三個點，點開，進入setting>preference>appearance，theme改爲dark則換成深色主體
3、點擊右上三個點圖標，選擇more tools,可添加很多工具到面板中，如animations，sensors傳感器等
三、application：調試 Progressive Web Apps
四、security
1、顯示是否安全
2、切換頁面，點擊不安全的源，面板會顯示一個到network的鏈接。
五、鍵盤快捷鍵和UI快捷鍵參考
鍵盤快捷方式：
|
快捷鍵 |
在Windows |
在Mac |
|
打開開發者工具 |
F12，Ctrl+Shift+I |
Cmd+Opt+I |
|
打開 / 切換檢查元素模式和瀏覽器窗口 |
Ctrl+Shift+C |
Cmd+Shift+C |
|
打開開發者工具並把焦點放在控制檯上 |
Ctrl+Shift+J |
Cmd+Opt+J |
|
下一個面板 |
Ctrl+] |
Cmd+] |
|
上一個面板 |
Ctrl+[ |
Cmd+[ |
|
切換控制檯/關閉設置對話框（如果打開） |
Esc |
Esc |
|
打開設備模式 |
Ctrl+Shift+M |
Cmd+Shift+M |
|
後退面板歷史 |
Ctrl+Alt+[ |
Cmd+Opt+[ |
|
刷新頁面 |
F5,Ctrl+R |
Cmd+R |
|
刷新頁面並清除緩存 |
Ctrl+F5,Ctrl+Shift+R |
Cmd+Shift+R |
|
在當前文件或面板中搜索文本 |
Ctrl+F |
Cmd+F |
|
在所有來源中搜索文本 |
Ctrl+Shift+F |
Cmd+Opt+F |
鼠標操作快捷方式及功能：
1、elements面板中，右鍵點擊元素，選擇edit as html,可以對整個元素及內部元素進行編輯
2、element面板右上角 的：hov， 可以模擬元素的僞類狀態， +> 可以添加新的樣式選擇器
面板快捷方式：（只保留了一些常用的）
|
Elements 面板 |
Windows |
Mac |
|
撤銷修改 |
Ctrl+Z |
Cmd+Z |
|
導航 |
Up,Down |
Up,Down |
|
展開 / 摺疊節點 |
Right,Left |
Right,Left |
|
展開 / 摺疊節點及其所有子節點 |
Ctrl+Alt+點擊剪頭圖標 |
Opt+點擊剪頭圖標 |
|
編輯屬性 |
Enter,屬性上雙擊 |
Enter,屬性上雙擊 |
|
隱藏元素 |
H |
H |
|
切換編輯HTML |
F2 |
|
|
Styles(樣式)窗格 |
Windows |
Mac |
|
跳轉到 Sources 面板中樣式規則屬性聲明的那一行 |
Ctrl+點擊屬性名 |
Cmd+點擊屬性名 |
|
跳轉到 Sources 面板中屬性值聲明的那一行 |
Ctrl+點擊屬性值 |
Cmd+點擊屬性值 |
|
切換顏色值表示法 |
Shift+點擊顏色選擇器小方塊 |
Shift+點擊顏色選擇器小方塊 |
|
編輯 下一個/ 上一個 屬性 |
Tab,Shift+Tab |
Tab,Shift+Tab |
|
Sources 面板 |
Windows |
Mac |
|
暫停/恢復腳本執行 |
F8,Ctrl+\ |
F8,Cmd+\ |
|
保存所有更改 |
Ctrl+Alt+S |
Cmd+Opt+S |
|
跳轉到行 |
Ctrl+G |
Ctrl+G |
|
以文件名搜索 |
Ctrl+O |
Cmd+O |
|
Timeline (時間軸)面板 |
Windows |
Mac |
|
啓動/停止記錄 |
Ctrl+E |
Cmd+E |
|
保存時間線數據 |
Ctrl+S |
Cmd+S |
|
載入時間線數據 |
Ctrl+O |
Cmd+O |
|
Console的快捷方式 |
Windows |
Mac |
|
清空控制檯 |
Ctrl+L |
Cmd+K,Opt+L |
|
多行輸入 |
Shift+Enter |
Ctrl+Return |
|
執行 |
Enter |
Return |
|
更多的Chrome快捷方式 |
Windows |
Mac |
|
查找下一個 |
Ctrl+G |
Cmd+G |
|
查找上一個 |
Ctrl+Shift+G |
Cmd+Shift+G |
|
在隱身模式打開新窗口 |
Ctrl+Shift+N |
Cmd+Shift+N |
|
切換和關閉書籤欄 |
Ctrl+Shift+B |
Cmd+Shift+B |
|
查看歷史頁 |
Ctrl+H |
Cmd+Y |
|
查看下載頁面 |
Ctrl+J |
Cmd+Shift+J |
|
查看任務管理器 |
Shift+ESC |
&am |
六、Aplication
1、clear storage 》 clear site data,會清除掉特定來源的所有數據
2、每個 cookie 提供了以下字段:
|
Cookie 字段 |
描述 |
|
Name |
Cookie 的名稱。 |
|
Value |
Cookie 的值。 |
|
Domain |
Cookie 的域。 |
|
Path |
Cookie 的路徑。 |
|
Expires / Maximum Age |
Cookie 的過期時間或最長週期。對於會話 cookie，這一領域始終是`Session`(會話)。 |
|
Size |
Cookie 的大小，以字節爲單位。 |
|
HTTP |
如果存在，則指示應僅通過 HTTP 使用 cookie，並且不允許 JavaScript 修改. |
|
Secure |
如果存在，則此 cookie 的通信必須在加密傳輸。 |
七、模擬移動設備
1、除常用的方法外，移動設備模式，還可以點擊小手機旋轉按鈕模擬屏幕旋轉。
八、調試安卓設備
https://www.html.cn/doc/chrome-devtools/remote-debugging/
九、檢查和調試Js
1、{}美化代碼拆成多行，代碼行點擊行號打斷點
2、添加條件斷點，當滿足所設置的條件之後，才觸發斷點：
右鍵點擊行號，選擇add conditional breadpoint,設置判斷條件，條件斷點是黃色的。
3、運行代碼片段：source左上角 》 符號，選擇snippets
4、監視變量：右鍵添加到watch，在watch面板，可以對變量增刪改
十、console控制檯
1、使用console.table可以比較輸出的數組對象
2、console.time 加上console.timeEnd()組合，可以計算執行時間
3、$0匹配製定的第一個dom元素，$(selector)返回匹配指定CSS選擇器的第一個DOM元素的引用。這個函數是document.querySelector()函數的別名。
第二部分 性能查看與分析
一、如何查看性能---時間軸
1、有的版本是有timeline時間軸編辦，有的是顯示performance面板。
第一個圓圈點擊開始記錄，第二個是刷新然後自動記錄，第三個停止
2、面板窗格介紹
Controls： 開始錄製，停止錄製，並配置在錄製過程中捕獲的信息。
Overview： 頁面性能的高級摘要。 更多關於這一點見文章下面。
Flame Chart： CPU 棧跟蹤的可視化。
Details： 選擇事件時，此窗格顯示有關該事件的更多信息。 當未選擇任何事件時，此窗格顯示有關所選時間範圍的信息。
如上圖所示：
其中
1、勾選後，下面面板中展示對應的記錄。
scereemshots 屏幕截圖
memory 內存記錄
2、 overview窗格里，對應一些資源參數：
FPS： 每秒幀數。綠色條越高，FPS越高。FPS曲線圖上方的紅色塊表示長幀，這可能是jank的候選。
CPU： CPU資源。此區域圖表指示哪些類型的事件消耗CPU資源。
NET：每個彩色條代表一個資源。條越長，表示檢索該資源所花費的時間越長。每個條的較亮部分表示等待時間（從請求資源到下載第一個字節之間的時間）。較暗的部分表示加載時間（下載第一個到最後一個字節之間的時間）
可以鼠標縮放展示範圍，查看具體的變化。
3、加載展示面板，從上倒下依次是
(1)、network網絡：展開後可以查看該頁面的網絡請求觸發和結束時間，耗時。
（2）、frames截圖：每一幀的截圖，可查看對應時間的頁面展示內容
（3）、interactions交互：包括了動畫animation
(4)、timings時間點：包括了幾個關鍵的時間點和綵線
綠線表示第一次繪製的時間。 （從白屏到有數據的時間：dom開始渲染，因爲dom是邊加載邊渲染的，綠線開始就是開始有頁面內容了）
藍線代表DOMContentLoaded事件。 （dom渲染完成時間）
紅線代表load事件。（資源加載完成的時間）
黑線代表首次有效加載時間。
（5）、mian主要內容：可以查看每個階段具體的加載內容
4、memory面板，可以查看內存情況
鼠標移入之後，會顯示當前時間點js\dom等數量。
5、餅圖彙總
從左到右依次是
（1）summary總結：
4中彩色條代表的含義如下：
- HTML文件是 blue (藍色) 的。
- 腳本是 yellow (黃色) 的。
- 樣式表是 purple (紫色) 的。
- 媒體文件是 green (綠色) 的。
- 其他雜項資源是 grey (灰色) 的。
藍色(Loading)：網絡通信和HTML解析
黃色(Scripting)：JavaScript執行
紫色(Rendering)：樣式計算和佈局，即重排
綠色(Painting)：重繪
灰色(other)：其它事件花費的時間
白色(Idle)：空閒時間
（2）後面是幾個耗時的不同排序：自底層而上各類別耗時、順序耗時、根據事件勾選不同的選項
二、分析運行時性能
https://www.html.cn/doc/chrome-devtools/rendering-tools/
可參考鏈接https://blog.csdn.net/zhenzigis/article/details/50556440，以及https://www.cnblogs.com/ranyonsue/p/9342839.html專門對這一塊兒的分析
三、評估網絡性能---network
除基本平時的應用外：
1、查看各個資源請求的耗時、內容等等，timing
2、Network Conditioning(網絡調節)設置不同的數據傳輸速率以供調研
四、修復內存問題
1、在performance頁面的記錄中，勾選memory，重新記錄，可以錄製可視化內存泄漏
簡單來看：內存佔用 處在平穩，則說明沒有內存泄漏；如果內存佔用 一直處於上升趨勢 則說明內存泄漏了
更具體的內存泄露分析，可見：https://blog.csdn.net/c11073138/article/details/84700482
2、更復雜的內存分配可進入memerry頁面
五、devtools擴展
1、devtools是可以擴展的，如果它缺少什麼功能，可以找到一個現有的插件，或者自己寫一個擴展程序
有兩種基本方式使用 DevTools 建立一個自定義的解決方案：
- DevTools Extension（開發者工具擴展程序）。一個 Chrome 插件，可插入 DevTools 來添加他的功能並擴展其 UI。
- 調試協議客戶端。一個第三方應用，使用 Chrome 的遠程調試協議來插入到低版本調試支持的 Chrome 中.
有了以上基礎，就可以對一個頁面做簡單的性能分析了。如果發現某一項可以優化，則可以更深入的研究，性能優化的方式很多，需要有針對性的處理，這裏暫不做描述。