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