開發者工具介紹
tags: Web 工具
開發者工具為前端工程師常使用的工具之一，它可以幫我們除錯，並且了解網頁的內容，
大多數的瀏覽器 (例如 Chrome, Edge, Firefox) 都有這個工具，
這邊會以 chrome 的開發者工具為例做介紹，因為篇幅比較長
會將功能分開說明
開發者工具怎麼開啟？
- 按下鍵盤上的 F12 鍵
- 在網頁上點擊滑鼠右鍵，然後選擇「檢查元素」
主要功能
Elements
呈現網頁的骨架與樣式，可以檢視和修改網頁的 HTML 結構和 CSS 樣式 (內容待補)
Console
顯示 JavaScript 錯誤、警告和日誌訊息
Sources
查看網頁載入的 JavaScript、CSS 和其他資源 也可以設置斷點
Network
監控網頁載入的所有資源，包含每個資源的載入時間、狀態碼、 表頭
Performance
可以了解網頁的效能運行狀況
Application
檢查Cookie、LocalStorage、SessionStorage 和 Cache 的地方 Service Workers 也可以從這邊看到
Device Toolbar
模擬不同設備（如手機、平板）的螢幕尺寸，也可以模擬網路速度（如3G、離線）
Lighthouse
計算網頁效能、SEO和無障礙
Memory
記憶體使用狀況
Security
檢查 HTTPS 和憑證問題