Google Chrome DevTools 開發者工具 藝誠網頁設計公司

一直以來Google Chrome 的開發者工具(DevTools)，是WEB 開發人員不可或缺工具之一。

Google 在這套工具的維護上，也相當的積極，時時在更新或是優化擴充新功能。

網站設計百科大全 前端設計 ChromeF12開發工具秘技 import_contacts  GoogleChromeDevTools開發者工具 13689 適用範圍 網頁開發人員 實用性： 重要性： GoogleChromeDevTools開發者工具 一直以來GoogleChrome的開發者工具(DevTools)，是WEB開發人員不可或缺工具之一。

Google在這套工具的維護上，也相當的積極，時時在更新或是優化擴充新功能。

GoogleChromeDevTools除了功能強大外，重點它是完全免費，且不需另外安裝，只要你裝了GoogleChrome瀏覽器，它就內建在裡面了。

開啟DevTools 開啟DevTools的方式有三種 從Chrome的主菜單中選擇更多工具>開發人員工具 右鍵單擊頁面元素，然後選擇檢查 使用快捷鍵開啟： Mac：Command+Option+I Windows/Linux：F12(Control+Shift+I) DevTools面板/模式 打開DevTools工具後，你會發現它是以頁籤的方式來切換各個面板或模式，這樣的介面對WEB開發人員應該是相常熟悉才是，幾乎所以這類的工具都是這樣的操作介面。

GoogleChromeDevTools功能很全面，要一一詳細的說明的話可能又是一篇論文等級的文章了…. 在這裡我們就先快速的介紹主要幾個操作面版及模式吧，後續我們再來探討各功能的操作及技巧。

裝置模擬DeviceMode 協助建立響應式頁面，及行動裝置模擬測試。

設備模擬 響應式及裝置螢幕尺寸測試 模擬傳感器測試：地理定位/加速度傳感器 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/sessionstorage、cookies...等。

magnifier 安全面板Security 驗證及除錯…等問題。

magnifier 補充說明/NOTE 圖片來源：GoogleChromeDevTools官方文件 相關資源‧章節/RELATED GoogleChromeDevTools官方文件 keyboard_backspace回上頁 前端設計 請選擇下方類別，查看您想了解的「前端設計」知識。

BootStrapRWD編排1 HTML5/CSS3互動特效3 JQuery套件介紹1 ChromeF12開發工具秘技2 網頁設計趨勢及觀察1 精選文章分享0 前端網頁設計4 行動版網頁設計0 教會網路宣教相關18 其它網站建置相關66