simonwellchang / demo-1

第 12 屆 iT邦幫忙鐵人賽 Modern Web 組冠軍 – 你所不知道的各種前端 Debug 技巧

你所不知道的各種前端 Debug 技巧

第 12 屆 iT 邦幫忙鐵人賽系列文章 Demo 網站。
👉 Demo 網站連結

文章列表

• [Day 01] 既然天天都要 Debug，何不從 Debug 技能著手呢?
• [Day 02] 你所知道的 Chrome DevTools
• [Day 03] Elements - CSS
• [Day 04] Elements - CSS 之 2
• [Day 05] Elements - DOM
• [Day 06] Console - Messages & Settings
• [Day 07] Console - API
• [Day 08] Console - Utilities Function
• [Day 09] Console - Run JavaScript
• [Day 10] Sources - Source Map & File Editing
• [Day 11] Sources - Workspace
• [Day 12] Sources - Breakpoints
• [Day 13] Sources - Step-by-Step Execution
• [Day 14] Sources - JavaScript Debugging
• [Day 15] Network - Overview & Settings
• [Day 16] Network - Filter & Search Requests
• [Day 17] Network - Analyze Requests
• [Day 18] Performance - Overview
• [Day 19] Performance - Web Vitals
• [Day 20] Performance - Critical Rendering Path
• [Day 21] Performance - How Rendering Works
• [Day 22] Performance - Rendering Optimization
• [Day 23] Performance - Analyze Paint & Layers
• [Day 24] Performance - Analyze Memory
• [Day 25] Performance - Analyze Runtime Activities
• [Day 26] Cookies - SameSite Attribute
• [Day 27] Cross-Origin Resource Sharing (CORS)
• [Day 28] Device Simulation & Remote Debugging
• [Day 29] Optimize images
• [Day 30] Tips for Lazy Loading Images

---

本系列文章經重新編排，並加入更多內容及範例後已整理成冊《你所不知道的必學前端 Debug 技巧》，若有興趣請參考下方連結：
https://www.tenlong.com.tw/products/9789864348954

相信能夠幫助讀者提升問題解決能力和開發效率！