掌握 Google Chrome 開發者工具課程
學習如何使用 DevTools，包括效能工具、Lighthouse、無障礙功能等眾多工具。
更新於 2024 年 9 月
語言 - 西班牙語
講座 -60
時長 -2.5 小時
終身訪問
課程 描述
您是否知道可以使用 Google Chrome DevTools 分析網站的效能？
或者，是否可以模擬視覺障礙來建立無障礙網站？
如果您對以上任何問題的回答是否定的，則可能是因為您只在表面上瞭解和使用過 Google Chrome DevTools。
DevTools 是一套強大的工具，可幫助開發人員構建更好的網站。
之所以能夠做到這一點，是因為 DevTools 包含用於除錯程式碼、檢查網站元素、執行 JavaScript 程式碼以進行測試、查詢效能問題、樣式問題、可訪問性問題等的工具。
在本課程中，您將學習如何使用 DevTools 的主要工具，從允許與頁面 DOM 樹互動的工具，到允許透過圖表和建議來檢測效能和可用性問題，從而提供更好的使用者體驗的工具。
在本課程結束時，您將瞭解如何使用以及在哪裡找到主要的 DevTools 來改進您的應用程式和網站。
本課程將介紹的一些主題包括：
與 DOM 樹元素互動的工具。
控制檯的使用。
使用 Sources 面板與原始碼互動。
使用 Network 面板視覺化網路元素。
用於改進效能和查詢效能瓶頸的工具。
用於查詢渲染問題的工具。
以及其他許多主題。
為了充分利用本課程，建議您具備 HTML、CSS 和 Javascript 的基礎知識。
您還在等什麼？快來建立更好的應用程式和網站吧！我們在課程中見！
本課程適合誰
- 想要學習如何使用 Chrome DevTools 的開發人員
- 想要提高除錯技能的開發人員
- 想要解決其網站問題的開發人員
- 想要了解 Chrome DevTools 最新功能的開發人員
目標
瞭解 Chrome DevTools 的主要工具。
瞭解在哪些情況下使用 DevTools 面板。
如何使用 DevTools 除錯 JavaScript 程式碼。
檢查和修改 DOM。
檢查和修改 CSS。
最佳化網站效能。
先決條件
HTML 基礎知識
CSS 基礎知識
JavaScript 基礎知識
課程大綱
檢視課程內容的詳細分解。
簡介
3 節課
-
開啟 Chrome DevTools 02:23 02:23 -
命令和鍵盤快捷鍵 01:40 01:40
-
Chrome DevTools：概覽 03:57 03:57
使用裝置模式模擬裝置
2 節課
控制檯
4 節課
網路
2 節課
記憶
4 節課
燈塔
13 節課
渲染器
3 節課
遠端除錯
2 節課
設定和個性化
1 講座
講師 資訊
HECTOR URIEL PEREZ ROJAS
課程 證書
使用您的證書來改變職業生涯或在您目前的職業生涯中提升自己。
我們的學生與
最佳
相關影片課程
檢視更多
