教學影片
時光戳記
課堂講義
1-1 Chrome 的開發者工具
- Chrome 的開發者工具 ( DevTools ) 是什麼？
- 如何打開 Chrome 的開發者工具？
- 工具模式：網頁視窗調整和虛擬設備的視窗
- 延伸閱讀：更多的面板功能
Chrome 的開發者工具 ( DevTools ) 是什麼？
- Chrome 針對開發者設計的工具。
- 可對於網頁頁面元素 ( HTML DOM Element )、CSS 進行檢查與修改
- 顯示網頁輸出（ console.log ）、執行 Javascript 指令
- 網路效能測試與頁面結果報告
如何打開 Chrome 的開發者工具？
使用選單操作
- Chrome 視窗選單中，選擇 [更多工具] -> [開發者工具]
- Chrome 右鍵選單中，選擇 [檢查 ( Inspect )]
使用快捷鍵
- Mac: Cmd + Opt + I
- Windows: Ctrl + Shift + I
工具模式
打開【開發者模式】
- 你能夠調整開發面板的寬度來讓也調整頁面寬度與高度
打開【測試機模式】
- 你能夠讓你的電腦瀏覽器模擬各式各樣的行動裝置
Element 面板
Network 網路面板 📺
延伸閱讀：更多的面板功能
💡 測試機模式不能取代真實設備，但對於工作繁多的前端工程師來說簡直是福音!
💡 多數的開發建議先支援 iPhone 與 iPad，因為是單一機種賣最多的設備，解析度應該要最先優化！
📖 【參考資料】- 淺談一下關於android碎片化的問題