Chrome網頁除錯功能教學與使用技巧

程度:初學者

語言:繁體中文

節數:26節

時長:3小時


課程描述

想要成為一位優秀的網頁開發者,不容錯過這堂課程,課程內容涵蓋很多關於網頁前端的除錯方式,學會後便不用頻繁浪費時間重新整理網頁瀏覽器查看效果,節省了很多來回瀏覽器與編輯器之間切換的時間。在 Chrome 上除錯調整數值完便能直接顯示效果,確認最終效果後再把修改好的代碼貼回網頁編輯器!

本課程以 Chrome 內建的開發人員工具來進行講解,課程內容中會教大家常用的開發技巧,結合第三方的 Chrome 插件,大幅提昇網頁開發效率,以及有效率地找出網頁錯誤問題!

你會學到甚麼?

  • 透過 Chrome 瀏覽器進行網頁除錯
  • 網頁是如何在瀏覽器上運作的基礎觀念
  • 使用 Chrome 第三方插件,大幅提昇網頁開發效率
  • 了解如何查看網頁效能、網頁流量的開發流程

參予課程前必須具備的條件?

  • 安裝 Chrome 網頁瀏覽器
  • 了解基礎 HTML、CSS、JavaScript

這門課程為誰而設?

  • 想要了解網頁瀏覽器是如何編譯網頁流程的開發者
  • 經常需要編輯器與瀏覽器來回更新瀏覽結果,想要學習瀏覽器開發人員工具的開發者

課程準備中,敬請期待

第一部份:Chrome 開發人員工具除錯環境介紹

  1. 開啟 Google Chrome develop tools 網頁除錯工具
  2. 如何選取元素,觀察HTML和CSS狀態
  3. 調整除錯功能介面
  4. 響應式網頁除錯
  5. 如何下載網頁資訊

第二部份:HTML、CSS除錯

  1. 如何搜尋想要除錯的HTML、CSS位置
  2. 使用開發者工具撰寫前端程式碼
  3. 偵測事件狀態樣式
  4. 調整CSS3 Transition速率
  5. 瀏覽CSS3 Animation效果

第三部份:JavaScript與效能調校

  1. network工具了解網頁資訊
  2. 使用Console執行與運行JavaScript
  3. 如何JavaScript除錯(Event)
  4. 如何JavaScript除錯(斷點)
  5. 使用Timeline、Profile工具了解網頁效能

第四部份:插件與資源補充

  1. 插件分享
  2. 更改除錯樣式
  3. Chrome插件運行Webserver
  4. Chrome開發者工具教學資源補充

第五部份:進階除錯

  1. 斷點進行JS除錯
  2. 事件監聽偵測
  3. 斷點偵測DOM結構狀態
  4. JS任務流進階控制事項(上)
  5. JS任務流進階控制事項(下)
  6. 使用Call Stack追踨函數程式碼
  7. AJAX XHR斷點偵測