Chrome DevTools的使用

1、Chrome DevTools 簡介

• Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析
• 手冊：Chrome 開發者工具中文手冊、Chrome 開發者工具官網
• 打開Chrome開發者工具
  • 在Chrome菜單中選擇：更多工具->開發者工具
  • 在頁面元素右鍵點擊，選擇檢查
  • 快捷鍵：Ctrl+shift+I（最近關閉）或Ctrl+shift+C（Elements）或 Ctrl+shift + J（console） 或 F12

2、Chrome DevTools 基本功能

一、Elements元素面板：檢查和調整頁面，調試Dom，調試CSS

• 查看和選擇DOM節點
  
• 實時編輯HTML和DOM
  • 添加或者修改HTML屬性：鼠標右鍵---Add attribute 、Edit attribute
  • 添加HTML標籤：右鍵---Edit as HTML
  • 複製或者剪HTML標籤：右鍵---Copy或者直接Ctrl + C/X 、Ctrl + V
  • 拖動HTML標籤：按住鼠標左鍵拖到位置鬆開便可
    
• 在Console中訪問節點
• 在Dom中斷點調試

二、Network網絡面板：調試請求，連接頁面靜態資源分佈，網頁性能檢測

三、Console控制面板：調試JavaScript、查看日誌、交互式代碼調試

四、Sources 源代碼資源面板：調試JavaScript頁面源代碼，進行斷點調試代碼

五、Application應用面板：查看&&調試客戶端存儲

六、Performacne性能面板：查看頁面性能細節，細粒度對網頁載入進行性能優化

七、Memory內存面板：JavaScript CPU分析器，內存堆分析器

八、Security安全面板：查看頁面安全及證書問題

九、Audits面板：使用Google Lighthouse輔助性能分析。給出優化建議