• Chrome F12 開發工具秘技
  • import_contacts Google Chrome DevTools 開發者工具
    103
適用範圍

網頁開發人員

實用性:
重要性:

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 網頁設計-Google_Chrome_DevTools_01

元素面板 Elements

可以直接對頁面 DOM 及 CSS 進行檢視修改,完成頁面排版設計。

  • DOM選取,相關CSS屬性查看
  • CSS樣式編輯
  • DOM物件編輯
  • CSS動畫檢查

magnifier 網頁設計-Google_Chrome_DevTools_02

控制面板 Console

頁面訊息記錄,直接在頁面上進JavaScript互動。

  • 診斷信息記錄
  • console.log
  • JavaScript 命令互動

magnifier 網頁設計-Google_Chrome_DevTools_03

來源面板 Sources

頁面 JavaScript 中斷點調試,或編輯頁面所關聯的文件,如果文件是連接本機,則可直接存檔回去。

  • JavaScript 中斷點設置
  • 頁面運行文件編輯

magnifier 網頁設計-Google_Chrome_DevTools_04

網路面板 Network

網路效能測試及報告。

  • 網路頻寬模擬
  • 頁面載入時間軸
  • 檔案相關資訊列表

magnifier 網頁設計-Google_Chrome_DevTools_05

性能面板 Performance (時間軸 Timeline)

記錄頁面生命週期中所發生的各種事件,以調整網頁的運行效能。

  • 記錄頁面操作
  • 記錄頁面畫面
  • 分析運行效能

magnifier 網頁設計-Google_Chrome_DevTools_06

內存面板 Memory

配置內存使用情況及查檢漏洞。

magnifier 網頁設計-Google_Chrome_DevTools_07

應用面板 Application

檢查所有載入資源,例如,資料庫、local/session storage、cookies...等。

magnifier 網頁設計-Google_Chrome_DevTools_08

安全面板 Security

驗證及除錯…等問題。

magnifier 網頁設計-Google_Chrome_DevTools_09

補充說明/ NOTE

圖片來源:Google Chrome DevTools 官方文件