九大功能面板：
- Elements元素面板：檢查調整調試頁面，調試DOM，調試CSS；
- NetWork網絡面板：調試請求，了解頁面靜態資源分布，網頁性能檢測；
- Console控制台面板：調試JavaScript，查看Console log日志，交互式代碼調試；
- Sources源代碼資源面板：調試JavaScript頁面源代碼，進行斷點調試代碼；
- Application應用面板：查看&調試客戶端存儲，如Cookie、LocalStorage、sessionStorage等；
- Performance性能面板：查看頁面性能細節，細粒度對網頁載入進行性能優化；
- Memory內存面板：JavaScript CPU分析器，內存堆分析器；
- Security安全面板：查看頁面安全及證書問題；
- Audits面板：使用GoogleLightHouse輔助性能分析，給出優化建議；
選擇DOM的方式:
- 在控制台中輸入document.querySelectorAll("標簽名")，即可實現在console中選擇到我們想要的標簽。
- 如果我們想要在使用console自帶的選擇箭頭點擊相應的標簽后，標簽的內容展示在控制台上，我們可以通過：點擊選擇箭頭聚焦在想要框選的標簽上-》在控制台輸入“$0”-》點擊Enter鍵 即可在控制台看見我們想要的標簽內容。
- 在想要選擇的標簽代碼處右鍵-》Copy-》CopyJSPath-》在console中粘貼下來；
在DOM中斷點調試：
- 屬性修改時打斷點：break on-》attribute modifications
- 節點刪除時打斷點：break on-》node removal
- 子樹修改時打斷點：break on-》subtree modifications
顏色選擇器：
在頁面的CSS樣式中隨意輸入一個設置顏色的值，focus設置顏色值的標簽，可看到我們編寫的CSS樣式，點擊樣色方塊 會出現一個顏色選擇器，吸管也就是colorPicker可以獲取到我們頁面中的任意一個顏色值
如果我們設置的屬性值過多不好尋找我們要調試的屬性值，可以利用Filter來搜索我們的屬性值，可以快速的Focus到我們想要的屬性值:
盒模型（box-model）：
可以實時顯示元素盒子的大小，也可以動態的改變它的大小來看到改變后的效果
在元素中增加類與偽類：
這三個按鈕的意思分別是：
- :hov 顯示/不顯示元素的狀態；
- .cls 可以增加一個類
- “+” 可以增加一個規則
快速調試CSS數值及顏色圖形動畫等：
當我們鼠標hover在元素樣式欄上的時候，就會出現如上圖所示的四個樣式調試欄，可以快速對我們的元素字體陰影、盒子陰影、顏色、背景顏色進行調試
動畫調試
點擊菜單-》More Tools-》Animations
推薦網站：https://daneden.github.io/animate.css/
可以使用console.table()來展示JSON格式的復雜信息，一目了然。