Chrome DevTools開發者工具調試

1-1 Chrome DevTools 功能簡介

（九大功能面板）

（1）Elements元素面板

檢查和調整頁面，調試DOM,調試CSS

（2）Network網絡面板

調試請求，瞭解頁面靜態資源分佈，網頁性能檢測

（3）Console控制檯面板

調試javascript,查看console log日誌，交互式代碼調試

（4）Sources源代碼資源面板

調試JavaScript頁面源代碼，進行斷點調試代碼

（5）Application應用面板

查看&調試客戶端存儲，如Cookie,LocalStorage,SessionStorage等

（6）Performance性能面板

查看頁面性能細節，細粒度對網頁載入進行性能優化（高階)

（7）Memory內存面板

JavaScript CPU分析器，內存堆分析器（高階)

（8）Security安全面板

查看頁面安全及證書問題（高階)

（9）Audits面板

使用Google Lighthouse輔助性能分析，給出優化建議（高階)

打開Chrome開發者工具

• 在chrome菜單中選擇：更多工具->開發者工具
• 在頁面元素上右鍵點擊，選擇「檢查」

• 快捷鍵
  打開最近關閉的狀態：
  Cmd+Opt+I(mac)
  Ctrl+Shift+I(windows)

  快速查看DOM或樣式：
  Command+Option+C(Mac)
  Control+Shift+C(windows)

  快速進入Console查看log運行Javascript：
  Command+Option+J(Mac)
  Control+Shift+J(windows)

• F12

查看與選擇DOM節點

• 在頁面中選擇DOM,在DOM中反向定位到頁面位置
• 在DOM中搜索（Command+F)

實時編輯HTML和DOM節點

• 編輯內容
• 編輯屬性Attributes
• 修改元素類型
• 調整這個DOM節點順序
• 像編輯器同樣編輯HTML代碼
• 隱藏/刪除/增長/拷貝節點

在Console中訪問節點

• 使用document.querySelectAll 訪問

• 使用$0快速訪問選中的元素
  

• 拷貝-> JS Path
  

在DOM中斷點調試

• 屬性修改時打斷點
  break on -> attribute modifications
• 節點刪除時打斷點
  break on -> node removal
• 子樹修改時打斷點
  break on -> subtree modifications
  

# 在元素中動態增長類和僞類

• 狀態
  

• 元素類
  

• 新的規則
  

快速調試CSS數值及顏色圖形動畫等

1）可視化

• 文字陰影
  

• 盒陰影
  

• 顏色
  

• 背景色
  

• 動畫
  

推薦網站：

console面板簡介與交互式命令

1. 運行javascript代碼，交互式編程
2. 查看程序中打印的log日誌
3. 斷點調試代碼Debugging

在console中調試日誌

1. console.log 打印信息
2. console.warn 告警信息
3. console.error 錯誤信息
4. console.table 展現JSON格式的複雜信息
   
5. console.group 信息組展現
   
6. console.custom 定製樣式
   
   %c 爲第二個參數styles
7. Network網絡請求錯誤展現

調試Javascript的基本流程

• debugger
• 事件斷點
• 行斷點

Sources面板

使用Snippets來輔助Debugging

• 導入庫
• 運行代碼片斷

使用DevTools做爲代碼編輯器

使用Network詳細分析請求