Chrome 網頁除錯功能大解密

長達 2 小時並達 20 部完整線上影音課程

提供基本除錯技巧及業界開發心法

介紹

Available in days

days after you enroll

Chrome 除錯環境介紹

Available in days

days after you enroll

簡單開啟 chrome dev tools 網頁除錯工具 (4:06)
教你如何選取元素，並觀察 HTML、CSS 當前狀態 (4:19)
調整除錯介面以符合螢幕解析度 (3:52)
檢視響應式網頁除錯心法 (5:48)
教你如何下載網頁資訊 (3:55)

HTML、CSS 除錯教學

Available in days

days after you enroll

如何搜尋想要 debug 的 HTML、CSS 位置 (8:22)
使用 chrome dev tools 撰寫前端程式碼 (8:06)
偵測事件狀態樣式 (4:04)
調整 CSS3 transition 速率 (3:48)
輕鬆瀏覽 CSS3 Animation 效果 (4:58)

JavaScript 與效能調校

Available in days

days after you enroll

從 network 了解網頁資訊 (7:48)
利用 Console 執行與維護 JavaScript (9:41)
如何線上除錯 JavaScript (Event篇) (5:29)
如何線上除錯 JavaScript (斷點篇) (8:57)
備註：使用 Timeline、Profile 了解網頁效能
使用 Timeline、Profile 了解網頁效能 (14:00)

實用插件與資源補充

Available in days

days after you enroll

JavaScript 進階除錯篇

Available in days

days after you enroll

下斷點 ( Breakpoint ) 進行 JS 除錯 (9:23)
事件監聽 ( EventListener ) 偵測 (8:47)
DOM Breakpoints 偵測 DOM 結構狀態 (11:02)
JS 任務流進階控制事項 (上) (6:50)
JS 任務流進階控制事項 (下) (5:17)
從 Call Stack 追蹤函數程式 (6:38)
AJAX XHR 斷點偵測 (4:31)