Chrome 網頁除錯功能大解密
4.6 (424 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,590 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Chrome 網頁除錯功能大解密 to your Wishlist.

Add to Wishlist

Chrome 網頁除錯功能大解密

還不會使用網頁瀏覽器的超強內建除錯心法?讓六角學院來教你!
4.6 (424 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,590 students enrolled
Last updated 5/2017
Traditional Chinese
Price: Free
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 有能力透過 Chrome 瀏覽器進行網頁除錯
  • 具備網頁是如何在瀏覽器上運作的基礎觀念
  • 整合 Chrome 第三方插件,大幅提昇網頁開發效率
  • 了解如何健檢網頁效能、網頁流量的開發流程
View Curriculum
Requirements
  • 需安裝 Chrome 網頁瀏覽器
  • 需要了解基礎 HTML、CSS、JavaScript
Description

如果你想要成為一位網頁開發者,那就更不容錯過這堂課程,影片內容涵蓋許多有關於網頁前端的除錯心法,學會後便能讓你不用每次在網頁編輯器寫完,還要頻繁地重新整理網頁瀏覽器確保畫面回饋。在 Chrome 上除錯完便能直接顯示效果,確認無誤後再貼回網頁編輯器,減少你屢次來回在軟體穿梭的時間!

本課程主要是以 Chrome 內建的開發人員工具來進行講解,課程內容中也包含六角學院們的講師常用的開發密技,以及結合第三方的 Chrome 插件,進而大幅提昇網頁開發效率,以及有效率地找出網頁 BUG,快來跟著六角學院一窺 Chrome DevTools 的強大之處吧!

Who is the target audience?
  • 想要了解網頁瀏覽器是如何編譯網頁流程的開發者
  • 時常在編輯器與瀏覽器來回更新瀏覽結果,而感到不勝其擾,想要學習瀏覽器開發人員工具的開發者
Students Who Viewed This Course Also Viewed
Curriculum For This Course
27 Lectures
02:53:33
+
Chrome 除錯環境介紹
5 Lectures 22:00
簡單開啟 chrome dev tools 網頁除錯工具
04:06

教你如何選取元素,並觀察 HTML、CSS 當前狀態
04:19

調整除錯介面以符合螢幕解析度
03:52

檢視響應式網頁除錯心法
05:48

教你如何下載網頁資訊
03:55
+
HTML、CSS 除錯教學
5 Lectures 29:18
如何搜尋想要 debug 的 HTML、CSS 位置
08:22

使用 chrome dev tools 撰寫前端程式碼
08:06

偵測事件狀態樣式
04:04

調整 CSS3 transition 速率
03:48

輕鬆瀏覽 CSS3 Animation 效果
04:58
+
JavaScript 與效能調校
5 Lectures 45:55
從 network 了解網頁資訊
07:48

利用 Console 執行與維護 JavaScript
09:41

如何線上除錯 JavaScript (Event篇)
05:29

如何線上除錯 JavaScript (斷點篇)
08:57

使用 Timeline、Profile 了解網頁效能
14:00
+
實用插件與資源補充
5 Lectures 23:52
常用插件分享
07:15

選擇想要的除錯樣式
03:46

使用 Chrome 插件創建 webserver
05:02

Safari、Firefox 瀏覽器功能介紹
05:20

Chrome Devtools 教學資源補充
02:29
+
JavaScript 進階除錯篇
7 Lectures 52:28
下斷點 ( Breakpoint ) 進行 JS 除錯
09:23

事件監聽 ( EventListener ) 偵測
08:47

DOM Breakpoints 偵測 DOM 結構狀態
11:02

JS 任務流進階控制事項 (上)
06:50

JS 任務流進階控制事項 (下)
05:17

從 Call Stack 追蹤函數程式
06:38

AJAX XHR 斷點偵測
04:31
About the Instructor
王志誠 Wang
4.7 Average rating
2,828 Reviews
10,350 Students
10 Courses
前端設計師、前端工程師

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,我還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

六角 學院
4.7 Average rating
2,828 Reviews
10,350 Students
10 Courses
Udemy 台灣合作夥伴

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


廖洧杰 liao
4.7 Average rating
2,828 Reviews
10,350 Students
10 Courses
前端工程師

你好,我是六角學院的校長,洧杰,

我是熱愛分享與交流的前端工程師,目前專注於兼容 Desktop / Mobile 網頁前端開發,期間已協助數百位平面設計師、網頁設計師導入標準網頁設計。

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。