iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

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

內容主體將會以 Chrome DevTools 為主,介紹各種常用功能,與其他瀏覽器的 DevTools 比較,另外會提及一些前端優化工具來應付網頁的問題(如 Web Vitals、SEO),盡可能詳盡的解釋各個功能的用法並搭配 Debug 情境來協助理解及應用。

鐵人鍊成 | 共 30 篇文章 | 219 人訂閱 訂閱系列文 RSS系列文 團隊Outcome First
DAY 11

[Day 11] Sources - Workspace

概覽 今天的主角是 Sources 面板的 Workspace 功能,主要提供當前頁面中各個 Context 的資源瀏覽和修改,上方可以看到五個頁籤,分別是:...

2020-09-24 ‧ 由 shizuku 分享
DAY 12

[Day 12] Sources - Breakpoints

此篇文章將說明如何透過 Sources 面板建立斷點來暫停 JavaScript 的執行,除了手動標記行號以外,還有非常多種方式,適用不同的情境。 注意重整頁...

2020-09-25 ‧ 由 shizuku 分享
DAY 13

[Day 13] Sources - Step-by-Step Execution

利用斷點暫停程式碼後,就能控制程式碼的執行來進行更進一步的 Debug,筆者會在本篇文章介紹如何在 Sources 面板中進行 JavaScript Debug...

2020-09-26 ‧ 由 shizuku 分享
DAY 14

[Day 14] Sources - JavaScript Debugging

使用 JavaScript Debugger 的精髓除了斷點、逐步執行外,還有各種列表顯示 JavaScript 目前的執行狀態,以及一些關於 Debugger...

2020-09-27 ‧ 由 shizuku 分享
DAY 15

[Day 15] Network - Overview & Settings

Network 面板詳細記錄著每個請求、回應的結果,除了用來檢查單次的請求是否完成,更好用的是對所有請求的搜尋、過濾、分析,以及客製化的介面。 概覽 Net...

2020-09-28 ‧ 由 shizuku 分享
DAY 16

[Day 16] Network - Filter & Search Requests

概覽 無論是在開發簡單的網站,檢查一個 Request 是否成功發送並收到預期的 Response,還是從 Network log 的時間線來分析網站效能問題,...

2020-09-29 ‧ 由 shizuku 分享
DAY 17

[Day 17] Network - Analyze Requests

概覽 網頁使用體驗和網路有著非常大的關係,而 Network 面板就是協助開發者分析網路問題的工具。本篇文章將會說明如何以 Network 面板來觀察各種資訊,...

2020-09-30 ‧ 由 shizuku 分享
DAY 18

[Day 18] Performance - Overview

前端可不是功能需求都完成了就完事,Load 超慢、動畫卡卡的、點擊按鈕過了一秒才有反應等等都會讓使用者默默在心中給網站體驗扣分,尤其是第一次瀏覽時更可能直接關...

2020-10-01 ‧ 由 shizuku 分享
DAY 19

[Day 19] Performance - Web Vitals

概覽 Web Vitals 是由 Google 分析大量使用者資料後,用來量化網站使用者體驗的指標,藉由測量 Web Vitals 分數讓開發者能更有方向的優化...

2020-10-02 ‧ 由 shizuku 分享
DAY 20

[Day 20] Performance - Critical Rendering Path

瀏覽器在繪製出整個頁面前大概經過了哪些步驟呢?什麼原因會阻止瀏覽器繪製頁面? 概覽 理解瀏覽器如何運作是網頁效能優化最重要的基礎,從接收到 HTML、CSS...

2020-10-03 ‧ 由 shizuku 分享