Chrome網頁除錯功能大解密-學習筆記(上)

六角學院Udemy學習筆記

---

Chrome 除錯環境介紹

• 使用 chrome dev tools 網頁除錯工具(開發人員工具)
• 將開發人員工具獨立出來，方便觀看Elements、Console
• 切換 device模式檢查RWD(320px,375px,425px,768px,1024px)

---

HTML、CSS 除錯教學

• Styles功能 - 使用Filter搜尋CSS元素
• Computed功能 - 查看CSS最終指定樣式
• Sources區塊 - 擷取CSS
• :hov - 更改元素樣式
• CSS元素 transition - 漸變效果調整速率
• show console - Animations 查看動畫效果時間軸

---

實用插件與資源補充

• Type Sample - 識別和預覽網頁字體

---