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