系列文章
[Day 11] Sources - Workspace
概覽 今天的主角是 Sources 面板的 Workspace 功能，主要提供當前頁面中各個 Context 的資源瀏覽和修改，上方可以看到五個頁籤，分別是：...
[Day 12] Sources - Breakpoints
此篇文章將說明如何透過 Sources 面板建立斷點來暫停 JavaScript 的執行，除了手動標記行號以外，還有非常多種方式，適用不同的情境。 注意重整頁...
[Day 13] Sources - Step-by-Step Execution
利用斷點暫停程式碼後，就能控制程式碼的執行來進行更進一步的 Debug，筆者會在本篇文章介紹如何在 Sources 面板中進行 JavaScript Debug...
[Day 14] Sources - JavaScript Debugging
使用 JavaScript Debugger 的精髓除了斷點、逐步執行外，還有各種列表顯示 JavaScript 目前的執行狀態，以及一些關於 Debugger...
[Day 15] Network - Overview & Settings
Network 面板詳細記錄著每個請求、回應的結果，除了用來檢查單次的請求是否完成，更好用的是對所有請求的搜尋、過濾、分析，以及客製化的介面。 概覽 Net...
[Day 16] Network - Filter & Search Requests
概覽 無論是在開發簡單的網站，檢查一個 Request 是否成功發送並收到預期的 Response，還是從 Network log 的時間線來分析網站效能問題，...
[Day 17] Network - Analyze Requests
概覽 網頁使用體驗和網路有著非常大的關係，而 Network 面板就是協助開發者分析網路問題的工具。本篇文章將會說明如何以 Network 面板來觀察各種資訊，...
[Day 18] Performance - Overview
前端可不是功能需求都完成了就完事，Load 超慢、動畫卡卡的、點擊按鈕過了一秒才有反應等等都會讓使用者默默在心中給網站體驗扣分，尤其是第一次瀏覽時更可能直接關...
[Day 19] Performance - Web Vitals
概覽 Web Vitals 是由 Google 分析大量使用者資料後，用來量化網站使用者體驗的指標，藉由測量 Web Vitals 分數讓開發者能更有方向的優化...
[Day 20] Performance - Critical Rendering Path
瀏覽器在繪製出整個頁面前大概經過了哪些步驟呢？什麼原因會阻止瀏覽器繪製頁面？ 概覽 理解瀏覽器如何運作是網頁效能優化最重要的基礎，從接收到 HTML、CSS...