Web前端開發Debug技巧

目    錄

第1章  熱身運動 1

1.1  關於本書 1

1.2  適用讀者 2

1.3  學習Debug技巧的地圖 2

1.4  REPL和實時測試工具 2

1.5  前端開發Debug工具的選擇 4

1.6  Debug“心法”的建立 4

1.6.1  放大出錯的影響 4

1.6.2  治標不治本 5

1.6.3  集中精神並且適度休息 5

1.6.4  不要鑽牛角尖 5

1.6.5  適時尋求協助 6

1.6.6  心無旁騖 6

第2章  通用技巧 7

2.1  專註於單一問題 7

2.2  關鍵詞搜索 8

2.3  閱讀文件、源代碼及規範 8

2.4  單方向尋找 9

2.5  降低變動條件 9

2.6  使用版本控制 9

2.7  善用開發工具 10

2.8  如何減少Bug及降低維護難度 10

2.8.1  靜態分析程序代碼 10

2.8.2  制定語法規範 11

2.8.3  統一語法格式 11

2.8.4  加入註釋 11

2.9  小結 12

第3章  DOM和CSS技巧 13

3.1  基本原則 13

3.2  元素檢查技巧 14

3.2.1  檢查工具 14

3.2.2  狀態鎖定 14

3.2.3  暫停執行 16

3.2.4  節點隱藏 17

3.2.5  搜索 17

3.3  存取、修改DOM 18

3.3.1  插入節點 18

3.3.2  移動和刪除節點 18

3.3.3  ==$0 18

3.4  CSS基本觀察技巧 19

3.4.1  屬性簡寫 19

3.4.2  !important 19

3.4.3  檢查計算後的屬性 20

3.4.4  默認CSS規則 20

3.4.5  繼承屬性 21

3.5  CSS高級檢查技巧 21

3.5.1  加入邊界提示 21

3.5.2  定義的屬性值和計算結果不同 22

3.5.3  實際顯示大小與計算結果不符 24

3.6  CSS調整技巧 25

3.6.1  添加規則 25

3.6.2  加入Pseudo元素 25

3.6.3  微調數值 26

3.6.4  快速切換Class 26

3.6.5  同時加入多項屬性 26

3.7  inline元素的問題 27

3.7.1  display: inline; 27

3.7.2  inline元素下方的空間 27

3.7.3  inline元素之間的空間 28

3.8  找出元素的定位容器 29

3.9  Flex和Grid 30

3.10  margin問題 31

3.10.1  margin重疊 31

3.10.2  註意負數margin 32

3.11  Overflow問題 33

3.11.1  overflow屬性值 33

3.11.2  瀏覽器滾動條的運行方式 34

3.11.3  找出滾動容器 34

3.11.4  position: sticky;無效 35

3.12  檢查元素的覆蓋順序 35

3.12.1  尋找堆疊上下文起點 35

3.12.2  創建Stacking context的條件 35

3.13  檢查動畫 36

第4章  JavaScript技巧 38

4.1  使用Debugger解決問題 38

4.1.1  為什麽要使用Debugger 38

4.1.2  Debugger的流程 38

4.1.3  重現問題 39

4.1.4  設置斷點 39

4.1.5  控制執行 41

4.1.6  檢查狀態 42

4.1.7  實時修正 42

4.1.8  熟悉Sources面板和Debugger的用法 43

4.2  使用Source Map 43

4.2.1  原因 43

4.2.2  原理 44

4.3  Console信息的可讀性 45

4.3.1  保持簡潔 45

4.3.2  更清晰的信息 47

4.4  使用Logpoint插入程序代碼 50

4.5  追蹤Call stack 51

4.6  事件監聽器 52

4.6.1  模擬觸發事件 52

4.6.2  檢查元素的事件監聽器 53

4.6.3  覆寫函數 53

4.7  多執行環境的問題 54

4.8  異步問題 55

4.9  比較運算和強制類型轉換 57

4.9.1  "0" 57

4.9.2  類型轉換被覆寫 58

4.9.3  && 和 || 58

4.9.4  不同相等比較方式的差異 59

4.9.5  字符串和數字顯示 59

4.9.6  對象屬性值 60

第5章  API技巧 62

5.1  分析問題的原因 62

5.1.1  Network錯誤 62

5.1.2  篩選和搜索 63

5.1.3  更清晰的信息 65

5.1.4  減少乾擾 65

5.1.5  模擬限制 67

5.1.6  畫面截圖 68

5.1.7  請求過慢 69

5.2  CORS錯誤 70

5.3  Mixed Content 71

5.4  Cookies無效 72

5.4.1  CORS 72

5.4.2  Cookies被阻擋 72

5.4.3  SameSite屬性 73

5.5  緩存問題 74

5.5.1  請求記錄列表 74

5.5.2  Prefetch和Preload 75

5.5.3  基本緩存機制 76

5.5.4  no-cache 76

5.6  修改請求和響應 77

5.6.1  復制請求 77

5.6.2  編輯、重發請求 77

5.6.3  攔截請求 78

5.6.4  模擬服務器 78

5.7  瀏覽器相關的問題 79

5.7.1  瀏覽器參數 79

5.7.2  定製化設置 80

5.7.3  使用無痕模式 81

5.7.4  Puppeteer 81

第6章  JavaScript性能分析技巧 82

6.1  基本分析流程 82

6.1.1  準備 82

6.1.2  記錄Activities 83

6.1.3  自上而下找出瓶頸的根源 85

6.1.4  自下而上查看運行時間較長的函數 86

6.2  內存占用量 87

6.2.1  垃圾回收 87

6.2.2  常見原因 88

6.2.3  徵兆 89

6.2.4  監測和分析 89

第7章  頁面加載流程分析技巧 95

7.1  分析 95

7.1.1  阻塞 96

7.1.2  避免阻塞 97

7.2  實例 98

7.2.1  阻塞渲染 98

7.2.2  避免阻塞渲染 99

7.2.3  阻塞解析 101

7.2.4  避免阻塞解析 102

第8章  瀏覽器渲染性能分析技巧 103

8.1  渲染流程 103

8.2  JavaScript階段 104

8.2.1  requestAnimationFrame 104

8.2.2  Worker 104

8.2.3  Throttle 105

8.3  Style Calculation階段 105

8.4  Layout段 106

8.4.1  佈局抖動 107

8.4.2  哪些操作會觸發佈局 108

8.4.3  哪些操作會強制佈局 108

8.5  Paint階段 108

8.5.1  圖層 108

8.5.2  降低圖層範圍和復雜度 109

8.5.3  圖層檢查技巧 109

8.5.4  哪些操作會觸發繪制 111

8.6  Composite階段 112

第9章  設備模擬及Debug技巧 113

9.1  設備模擬 113

9.1.1  顯示 113

9.1.2  交互 116

9.2  遠程調試 117

9.2.1  Android 117

9.2.2  iOS 119

9.3  檢測工具 121

9.3.1  Mobile Friendly Test 121

9.3.2  Lighthouse 121

9.3.3  WebPageTest 121

9.3.4  Can I Use 121

9.3.5  BrowserStack 122

第10章  用戶體驗和無障礙網頁 123

10.1  Web Vitals 123

10.1.1  指標測量方式 123

10.1.2  LCP 124

10.1.3  FID 126

10.1.4  CLS 127

10.1.5  其他網頁體驗指標 128

10.1.6  測量工具 130

10.2  無障礙網頁 131

10.2.1  對比度 131

10.2.2  鍵盤瀏覽 133

10.2.3  檢查Tab順序 133

10.2.4  tabindex 134

10.2.5  屏幕閱讀器 135

10.2.6  檢測工具 135

第11章  錯誤處理技巧 136

11.1  攔截錯誤 136

11.1.1  try/catch語句 136

11.1.2  異步錯誤攔截 137

11.1.3  錯誤攔截時機 138

11.1.4  錯誤事件 140

11.2  拋出錯誤 141

11.3  處理錯誤 142

11.3.1  區分錯誤嚴重程度 142

11.3.2  錯誤分析 143

第12章  Chrome DevTools 144

12.1  打開方式 144

12.1.1  快捷鍵 145

12.1.2  自動打開 145

12.2  組成 145

12.3  定製化DevTools 146

12.3.1  設置 146

12.3.2  指令菜單 147

12.3.3  調整外觀 147

12.4  Chrome DevTools文件 149

第13章  Elements面板 150

13.1  基本介紹 150

13.2  查看DOM結構 151

13.2.1  檢查和瀏覽元素信息 151

13.2.2  搜索元素 152

13.3  編輯DOM 153

13.3.1  編輯元素類型和屬性 153

13.3.2  編輯元素內容 154

13.3.3  改變元素順序 155

13.3.4  剪切、復制、粘貼元素 155

13.3.5  隱藏、刪除元素 156

13.3.6  復原、取消復原 156

13.4  在Console面板中存取元素 157

13.4.1  將元素存入變量 157

13.4.2  復制元素的選擇器 158

13.5  查看元素CSS 158

13.5.1  Styles分頁 158

13.5.2  復制元素CSS 159

13.5.3  Computed分頁 160

13.5.4  搜索和篩選CSS 160

13.6  修改元素CSS 162

13.6.1  修改元素的class 162

13.6.2  添加規則 163

13.6.3  修改規則 164

13.6.4  顏色編輯器 165

13.6.5  陰影編輯器 169

13.6.6  角度編輯器 169

13.6.7  貝氏曲線編輯器 169

13.6.8  Box model編輯器 170

13.6.9  字體編輯器 171

13.7  改變元素狀態 172

13.8  排版編輯器和Debugger 172

13.8.1  Flex 174

13.8.2  Grid 174

13.8.3  Scroll Snap 175

13.9  DOM斷點 175

第14章  Console面板 176

14.1  基本介紹 176

14.2  Console設置 176

14.2.1  Group similar messages in console 177

14.2.2  Eager evaluation 177

14.2.3  Autocomplete from history 178

14.2.4  Evaluate triggers user activation 178

14.2.5  Hide network 179

14.2.6  Preserve log 180

14.2.7  Selected context only 180

14.2.8  Log XMLHttpRequests 181

14.2.9  Show timestamps 182

14.3  Console信息 182

14.3.1  信息級別 182

14.3.2  篩選信息 183

14.4  Console API 186

14.4.1  console.assert 186

14.4.2  console.count 187

14.4.3  console.group 188

14.4.4  console.table 189

14.4.5  console.time 190

14.4.6  console.trace 191

14.4.7  自定義信息樣式 191

14.5  Console Utilities API 192

14.5.1  $_ 192

14.5.2  $0~$4 192

14.5.3  $和$$ 193

14.5.4  $x 193

14.5.5  debug 194

14.5.6  monitor 194

14.5.7  monitorEvents 195

14.5.8  getEventListeners 195

14.5.9  queryObjects 196

14.5.10  copy 196

14.5.11  keys和values 197

14.5.12  clear 197

14.6  在Console內執行JavaScript 197

14.6.1  基本特性 198

14.6.2  自動補齊和重復輸入 199

14.6.3  Top-level await語法 199

14.6.4  切換JavaScript Context 200

14.6.5  Live Expression 200

第15章  Sources面板 201

15.1  面板組成 201

15.2  文件面板 203

15.2.1  Page分頁 203

15.2.2  Filesystem分頁 203

15.2.3  Overrides分頁 205

15.2.4  Content scripts分頁 206

15.2.5  Snippets分頁 207

15.3  設置斷點 207

15.3.1  概覽 208

15.3.2  程序代碼斷點 208

15.3.3  DOM斷點 211

15.3.4  請求斷點 212

15.3.5  事件監聽器斷點 213

15.3.6  例外斷點 214

15.3.7  函數斷點 214

15.3.8  內容安全政策違規斷點 215

15.4  單步執行JavaScript 216

15.4.1  恢復執行 216

15.4.2  越過該行程序代碼 217

15.4.3  進入函數 217

15.4.4  退出函數 218

15.4.5  跳轉 218

15.4.6  單步執行異步程序代碼 219

15.4.7  多線程 221

15.4.8  忽略斷點 222

15.5  查看JavaScript的執行狀態 222

15.5.1  查看變量值 222

15.5.2  監控自定義執行結果 225

15.5.3  調用堆棧 225

15.6  Sources面板設置 226

15.6.1  忽略文件 226

15.6.2  Source Map 228

第16章  Network面板 229

16.1  基本介紹 229

16.1.1  面板組成 229

16.1.2  記錄請求信息 230

16.2  工具欄 230

16.3  設置 232

16.3.1  Use large request rows 232

16.3.2  Group by frame 233

16.3.3  Show overview 233

16.3.4  Capture screenshots 234

16.4  Drawer 234

16.4.1  Network Conditions 234

16.4.2  Network request blocking 235

16.5  篩選請求記錄 235

16.5.1  基本篩選方式 235

16.5.2  以屬性篩選請求 236

16.6  搜索請求內容 239

16.7  請求記錄列表設置 240

16.7.1  排序請求記錄 240

16.7.2  自定義字段 240

16.7.3  字段說明 240

16.8  詳細請求信息 241

16.8.1  Headers分頁 242

16.8.2  Preview分頁 243

16.8.3  Response分頁 243

16.8.4  Initiator分頁 244

16.8.5  Timing分頁 245

16.8.6  Messages分頁 246

16.8.7  Cookies分頁 247

16.8.8  復制請求信息 247

第17章  Performance面板 249

17.1  基本介紹 249

17.1.1  面板組成 249

17.1.2  工具欄 250

17.1.3  設置 252

17.2  Overview圖表 253

17.2.1  選擇記錄區間 253

17.2.2  FPS行 254

17.2.3  CPU行 254

17.2.4  NET行 254

17.2.5  逐幀截圖 255

17.3  Activities列表 255

17.3.1  Main列表 255

17.3.2  Network列表 261

17.3.3  Frames列表 261

17.3.4  Timings列表 263

17.3.5  Experience列表 264

17.3.6  GPU列表 265

17.3.7  Raster列表 265

17.3.8  其他列表 265