網頁(HTML/JS/CSS)除錯(Debug)_Chrome 教學
網頁(HTML/JS/CSS)除錯(Debug)_Chrome 教學
資料來源: https://ithelp.ithome.com.tw/users/20129636/ironman/3382?page=1
GITHUB: https://github.com/jash-git/Jash-good-idea-20241217-001/tree/main/%E7%B6%B2%E9%A0%81%E9%99%A4%E9%8C%AF(Debug)_Chrome%20%E6%95%99%E5%AD%B8
_Chrome%20%E6%95%99%E5%AD%B8/IMG/01.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/02.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/03.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/04.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/05.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/06.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/07.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/08.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/09.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/10.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/11.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/12.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/13.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/14.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/15.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/16.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/17.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/18.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/19.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/20.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/21.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/22.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/23.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/24.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/25.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/26.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/27.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/28.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/29.png?raw=true)
_Chrome%20%E6%95%99%E5%AD%B8/IMG/30.png?raw=true)
3 thoughts on “網頁(HTML/JS/CSS)除錯(Debug)_Chrome 教學”
21
Like
2
留言
14712
瀏覽
DAY 1
達標好文 [Day 01] 既然天天都要 Debug，何不從 Debug 技能著手呢?
相信 Debug 是開發者每天必經的過程，能否順利 Debug 決定了開發者一整天的心情，即使如此卻較少看到開發者著墨在 Debug 技巧上，因此接下來的…
2020-09-14 ‧ 由 shizuku 分享
7
Like
0
留言
17858
瀏覽
DAY 2
達標好文 [Day 02] 你所知道的 Chrome DevTools
身為一個網頁開發者，肯定對 Chrome DevTools 不陌生，雖然每天都會用到，可能都是不斷重複使用某些功能而已，如果現在讓讀者為自己打個「對 Chro…
2020-09-15 ‧ 由 shizuku 分享
5
Like
0
留言
11291
瀏覽
DAY 3
[Day 03] Elements – CSS
想要又快又穩的滿足各種 UI 需求，每天肯定花不少時間在 Debug CSS，不過總有某些特殊情境讓 Debug 過程非常繁瑣，甚至是難以完成，此時心中就會逐…
2020-09-16 ‧ 由 shizuku 分享
5
Like
0
留言
7742
瀏覽
DAY 4
達標好文 [Day 04] Elements – CSS 之 2
概覽 上一篇文章主要講解了 Elements 面板中設定 CSS 的部分，今天筆者將會繼續說明 CSS 相關功能，包括 Styles 分頁上方的小工具列以及 C…
2020-09-17 ‧ 由 shizuku 分享
6
Like
0
留言
7336
瀏覽
DAY 5
[Day 05] Elements – DOM
概覽 今天的文章主要會提到筆者在瀏覽、操作 DOM 結構時常用到或覺得不可不知的功能，雖然大部分的功能都很簡單或有很多種達成的方式，不過筆者的確因此省了不少時間…
2020-09-18 ‧ 由 shizuku 分享
6
Like
0
留言
10073
瀏覽
DAY 6
[Day 06] Console – Messages & Settings
完全掌握 Console 面板，從認識 Console message 開始。 概覽 Console 面板做為網頁開發者的 Debug 神器，在許多網站開啟…
2020-09-19 ‧ 由 shizuku 分享
10
Like
0
留言
8049
瀏覽
DAY 7
達標好文 [Day 07] Console – API
Debug JavsScript 的時候最簡單直覺的方式就是 console.log，不過除了 log 以外，Console API 其實還有非常多好用的 Me…
2020-09-20 ‧ 由 shizuku 分享
1
Like
0
留言
5632
瀏覽
DAY 8
[Day 08] Console – Utilities Function
除了可以在 JavaScript 執行的 Console API 外，Console 還提供了一些 Debug 專用的 Function，每一個都身懷絕技。 閱…
2020-09-21 ‧ 由 shizuku 分享
1
Like
0
留言
7414
瀏覽
DAY 9
[Day 09] Console – Run JavaScript
Run JavaScript 今天的文章是 Console 系列的最後一篇，筆者會講解在 Console 中有關 JavaScript 執行的功能，還有一些在…
2020-09-22 ‧ 由 shizuku 分享
2
Like
0
留言
5172
瀏覽
DAY 10
[Day 10] Sources – Source Map & File Editing
終於來到了重頭戲 Sources 面板，前面的文章提到了許多提高 Debug 效率的小撇步，但如果遇到了更加複雜的情境，透過 Console、Elements…
2020-09-23 ‧ 由 shizuku 分享
2
Like
0
留言
5922
瀏覽
DAY 11
[Day 11] Sources – Workspace
概覽 今天的主角是 Sources 面板的 Workspace 功能，主要提供當前頁面中各個 Context 的資源瀏覽和修改，上方可以看到五個頁籤，分別是：…
2020-09-24 ‧ 由 shizuku 分享
1
Like
0
留言
5154
瀏覽
DAY 12
[Day 12] Sources – Breakpoints
此篇文章將說明如何透過 Sources 面板建立斷點來暫停 JavaScript 的執行，除了手動標記行號以外，還有非常多種方式，適用不同的情境。 注意重整頁…
2020-09-25 ‧ 由 shizuku 分享
1
Like
1
留言
3671
瀏覽
DAY 13
[Day 13] Sources – Step-by-Step Execution
利用斷點暫停程式碼後，就能控制程式碼的執行來進行更進一步的 Debug，筆者會在本篇文章介紹如何在 Sources 面板中進行 JavaScript Debug…
2020-09-26 ‧ 由 shizuku 分享
1
Like
0
留言
4635
瀏覽
DAY 14
[Day 14] Sources – JavaScript Debugging
使用 JavaScript Debugger 的精髓除了斷點、逐步執行外，還有各種列表顯示 JavaScript 目前的執行狀態，以及一些關於 Debugger…
2020-09-27 ‧ 由 shizuku 分享
3
Like
1
留言
5014
瀏覽
DAY 15
[Day 15] Network – Overview & Settings
Network 面板詳細記錄著每個請求、回應的結果，除了用來檢查單次的請求是否完成，更好用的是對所有請求的搜尋、過濾、分析，以及客製化的介面。 概覽 Net…
2020-09-28 ‧ 由 shizuku 分享
2
Like
0
留言
2945
瀏覽
DAY 16
[Day 16] Network – Filter & Search Requests
概覽 無論是在開發簡單的網站，檢查一個 Request 是否成功發送並收到預期的 Response，還是從 Network log 的時間線來分析網站效能問題，…
2020-09-29 ‧ 由 shizuku 分享
4
Like
0
留言
6386
瀏覽
DAY 17
[Day 17] Network – Analyze Requests
概覽 網頁使用體驗和網路有著非常大的關係，而 Network 面板就是協助開發者分析網路問題的工具。本篇文章將會說明如何以 Network 面板來觀察各種資訊，…
2020-09-30 ‧ 由 shizuku 分享
3
Like
1
留言
3966
瀏覽
DAY 18
[Day 18] Performance – Overview
前端可不是功能需求都完成了就完事，Load 超慢、動畫卡卡的、點擊按鈕過了一秒才有反應等等都會讓使用者默默在心中給網站體驗扣分，尤其是第一次瀏覽時更可能直接關…
2020-10-01 ‧ 由 shizuku 分享
0
Like
0
留言
5064
瀏覽
DAY 19
[Day 19] Performance – Web Vitals
概覽 Web Vitals 是由 Google 分析大量使用者資料後，用來量化網站使用者體驗的指標，藉由測量 Web Vitals 分數讓開發者能更有方向的優化…
2020-10-02 ‧ 由 shizuku 分享
3
Like
0
留言
3584
瀏覽
DAY 20
[Day 20] Performance – Critical Rendering Path
瀏覽器在繪製出整個頁面前大概經過了哪些步驟呢？什麼原因會阻止瀏覽器繪製頁面？ 概覽 理解瀏覽器如何運作是網頁效能優化最重要的基礎，從接收到 HTML、CSS…
2020-10-03 ‧ 由 shizuku 分享
2
Like
0
留言
2601
瀏覽
DAY 21
[Day 21] Performance – How Rendering Works
利用 Performance 面板紀錄效能後，會發現其中以主線程 Main 圖表涵蓋了最多資訊，從開始解析 HTML 到最後繪製出頁面，瀏覽器都做了哪些事情呢？…
2020-10-04 ‧ 由 shizuku 分享
3
Like
0
留言
3035
瀏覽
DAY 22
[Day 22] Performance – Rendering Optimization
概覽 大部分的瀏覽器會以每秒 60 次的頻率刷新頁面，反過來說只要瀏覽器來不及在 16 毫秒（1000/60）內產出下一個畫面就會讓使用者感覺卡卡的，影響使用體…
2020-10-05 ‧ 由 shizuku 分享
1
Like
1
留言
2275
瀏覽
DAY 23
[Day 23] Performance – Analyze Paint & Layers
本文將會講解如何利用 DevTools 找出瀏覽器繪製頁面的效能瓶頸，並利用 GPU 和瀏覽器繪製頁面的機制來優化動畫效能，閱讀本文前建議先理解瀏覽器繪製頁面的…
2020-10-06 ‧ 由 shizuku 分享
1
Like
0
留言
2994
瀏覽
DAY 24
[Day 24] Performance – Analyze Memory
有時候網頁會越跑越慢，到底發生了甚麼事情呢？ 概覽 拖慢網頁效能的原因除了 JavaScript、Rendering 外，還有個可能就是用了過多的記憶體，尤…
2020-10-07 ‧ 由 shizuku 分享
1
Like
1
留言
1957
瀏覽
DAY 25
[Day 25] Performance – Analyze Runtime Activities
在 Performance 面板中，為了讓開發者方便優化網頁效能，會盡可能把瀏覽器運作的過程分類為各種 Activities，開發者找出造成效能瓶頸的 Acti…
2020-10-08 ‧ 由 shizuku 分享
6
Like
0
留言
35920
瀏覽
DAY 26
達標好文 [Day 26] Cookies – SameSite Attribute
Chrome 從 84 版開始將 Cookie 的 SameSite 屬性預設為 Lax，使用到 Third-party cookies 的服務若沒有設定 S…
2020-10-09 ‧ 由 shizuku 分享
8
Like
1
留言
43702
瀏覽
DAY 27
達標好文 [Day 27] Cross-Origin Resource Sharing (CORS)
概覽 考量到安全問題，瀏覽器會以同源政策（Same-origin policy） 限制網頁對其他 Origin 的資源（Resource）存取，例如 AJAX、…
2020-10-10 ‧ 由 shizuku 分享
1
Like
0
留言
6378
瀏覽
DAY 28
[Day 28] Device Simulation & Remote Debugging
隨著網站的手機使用率越來越高，行動版網站漸漸變成標配，為了避免同時需要維護多個網站或是 SEO 被瓜分，通常會以 RWD（Responsive Web Des…
2020-10-11 ‧ 由 shizuku 分享
1
Like
0
留言
6122
瀏覽
DAY 29
[Day 29] Optimize Images
取自 Artifact Austin: Leaving Pixels Behind – Todd Parker，哪些圖片適合使用 SVG？ 在網頁中，圖片…
2020-10-12 ‧ 由 shizuku 分享
4
Like
1
留言
19213
瀏覽
DAY 30
達標好文 [Day 30] Tips for Lazy Loading Images
Lazy loading 是廣為人知的網頁優化技巧，尤其應用在圖片上時能夠大幅減少效能和流量的浪費，目前也有許多圖片 Lazy loading 的套件可以使用，…
2020-10-13 ‧ 由 shizuku 分享