程度:初學者
語言:繁體中文
節數:26節
時長:3小時
課程描述
想要成為一位優秀的網頁開發者,不容錯過這堂課程,課程內容涵蓋很多關於網頁前端的除錯方式,學會後便不用頻繁浪費時間重新整理網頁瀏覽器查看效果,節省了很多來回瀏覽器與編輯器之間切換的時間。在 Chrome 上除錯調整數值完便能直接顯示效果,確認最終效果後再把修改好的代碼貼回網頁編輯器!
本課程以 Chrome 內建的開發人員工具來進行講解,課程內容中會教大家常用的開發技巧,結合第三方的 Chrome 插件,大幅提昇網頁開發效率,以及有效率地找出網頁錯誤問題!
你會學到甚麼?
- 透過 Chrome 瀏覽器進行網頁除錯
- 網頁是如何在瀏覽器上運作的基礎觀念
- 使用 Chrome 第三方插件,大幅提昇網頁開發效率
- 了解如何查看網頁效能、網頁流量的開發流程
參予課程前必須具備的條件?
- 安裝 Chrome 網頁瀏覽器
- 了解基礎 HTML、CSS、JavaScript
這門課程為誰而設?
- 想要了解網頁瀏覽器是如何編譯網頁流程的開發者
- 經常需要編輯器與瀏覽器來回更新瀏覽結果,想要學習瀏覽器開發人員工具的開發者
課程準備中,敬請期待
第一部份:Chrome 開發人員工具除錯環境介紹
- 開啟 Google Chrome develop tools 網頁除錯工具
- 如何選取元素,觀察HTML和CSS狀態
- 調整除錯功能介面
- 響應式網頁除錯
- 如何下載網頁資訊
第二部份:HTML、CSS除錯
- 如何搜尋想要除錯的HTML、CSS位置
- 使用開發者工具撰寫前端程式碼
- 偵測事件狀態樣式
- 調整CSS3 Transition速率
- 瀏覽CSS3 Animation效果
第三部份:JavaScript與效能調校
- network工具了解網頁資訊
- 使用Console執行與運行JavaScript
- 如何JavaScript除錯(Event)
- 如何JavaScript除錯(斷點)
- 使用Timeline、Profile工具了解網頁效能
第四部份:插件與資源補充
- 插件分享
- 更改除錯樣式
- Chrome插件運行Webserver
- Chrome開發者工具教學資源補充
第五部份:進階除錯
- 斷點進行JS除錯
- 事件監聽偵測
- 斷點偵測DOM結構狀態
- JS任務流進階控制事項(上)
- JS任務流進階控制事項(下)
- 使用Call Stack追踨函數程式碼
- AJAX XHR斷點偵測
鏈結到這頁!