Google Chrome DevTools 開發者工具
一直以來 Google Chrome 的 開發者工具 (DevTools),是 WEB 開發人員不可或缺工具之一。
Google 在這套工具的維護上,也相當的積極,時時在更新或是優化擴充新功能。
Google Chrome DevTools 除了功能強大外,重點它是完全免費,且不需另外安裝,只要你裝了 Google Chrome 瀏覽器,它就內建在裡面了。
開啟 DevTools
開啟 DevTools 的方式有三種
- 從Chrome的主菜單中選擇 更多工具 > 開發人員工具
- 右鍵單擊頁面元素,然後選擇 檢查
- 使用快捷鍵開啟:
Mac:Command + Option + I
Windows/Linux:F12 (Control + Shift + I )
DevTools 面板/模式
打開 DevTools 工具後,你會發現它是以頁籤的方式來切換各個面板或模式,這樣的介面對 WEB 開發人員應該是相常熟悉才是,幾乎所以這類的工具都是這樣的操作介面。
Google Chrome DevTools 功能很全面,要一一詳細的說明的話可能又是一篇論文等級的文章了….
在這裡我們就先快速的介紹主要幾個操作面版及模式吧,後續我們再來探討各功能的操作及技巧。
裝置模擬 Device Mode
協助建立響應式頁面,及行動裝置模擬測試。
- 設備模擬
- 響應式及裝置螢幕尺寸測試
- 模擬傳感器測試:地理定位/加速度傳感器
magnifier
元素面板 Elements
可以直接對頁面 DOM 及 CSS 進行檢視修改,完成頁面排版設計。
- DOM選取,相關CSS屬性查看
- CSS樣式編輯
- DOM物件編輯
- CSS動畫檢查
magnifier
控制面板 Console
頁面訊息記錄,直接在頁面上進JavaScript互動。
- 診斷信息記錄
- console.log
- JavaScript 命令互動
magnifier
來源面板 Sources
頁面 JavaScript 中斷點調試,或編輯頁面所關聯的文件,如果文件是連接本機,則可直接存檔回去。
- JavaScript 中斷點設置
- 頁面運行文件編輯
magnifier
網路面板 Network
網路效能測試及報告。
magnifier
性能面板 Performance (時間軸 Timeline)
記錄頁面生命週期中所發生的各種事件,以調整網頁的運行效能。
magnifier
內存面板 Memory
配置內存使用情況及查檢漏洞。
magnifier
應用面板 Application
檢查所有載入資源,例如,資料庫、local/session storage、cookies...等。
magnifier
安全面板 Security
驗證及除錯…等問題。
magnifier
補充說明/ NOTE
圖片來源:Google Chrome DevTools 官方文件