資料目錄：

1如何閱讀本小冊？
2初識調(diào)試
3如何調(diào)試網(wǎng)頁的 JS（以 React 為例）
4VSCode Chrome Debugger 配置詳解
5sourcemap 的原理和作用
6Webpack 的 sourcemap 配置
7實戰(zhàn)案例：調(diào)試 Vue 項目
8VSCode Chrome Debugger 斷點映射的原理
9實戰(zhàn)案例：調(diào)試 React 源碼
10實戰(zhàn)案例：調(diào)試 Vue 源碼
11用 VSCode Snippets 快速創(chuàng)建調(diào)試配置
12如何調(diào)試 Node.js 代碼
13跑 npm scripts，有更香的方式
14VSCode Node Debugger 配置詳解
15調(diào)試代碼會遇到的 9 種 JS 作用域
16實戰(zhàn)案例：調(diào)試 Nest.js 項目和源碼
17命令行工具的兩種調(diào)試方式（以 ESLint 源碼調(diào)試為例）
18實戰(zhàn)案例：調(diào)試 patch-package 源碼
19實戰(zhàn)案例：調(diào)試 Babel 源碼
20實戰(zhàn)案例：調(diào)試 Vite 源碼
21實戰(zhàn)案例：調(diào)試 TypeScript 源碼
22打斷點的 7 種方式，你用過幾種？
23實戰(zhàn)案例：調(diào)試 Ant Design 組件源碼
24實戰(zhàn)案例：調(diào)試 ElementUI 組件源碼
25會用 Performance 工具，就能深入理解 Event Loop
26如何用 Performance 工具分析并優(yōu)化性能
27Web Vitals 如何計算？如何衡量網(wǎng)頁性能？
28console.log 會導(dǎo)致內(nèi)存泄漏？用 Performance 和 Memory 分析下（上）
29console.log 會導(dǎo)致內(nèi)存泄漏？用 Performance 和 Memory 分析下（下）
30如何用 Layers 分析網(wǎng)頁的圖層
31Chrome DevTools 小功能集錦
32放棄 console.log 吧！用 Debugger 你能讀懂各種源碼
33如何遠程調(diào)試 android 移動端網(wǎng)頁
34如何遠程調(diào)試 ios 移動端網(wǎng)頁
35遠程調(diào)試移動端網(wǎng)頁的原理
36如何用 Charles 斷點調(diào)試 https 請求？
37Charles 全功能速通（上）
38Charles 全功能速通（下）
39線上報錯如何直接調(diào)試本地源碼？
40手動對接 CDP 來理解 Chrome DevTools 實現(xiàn)原理
41實現(xiàn) Chrome DevTools 的 Coverage 功能
42編譯 chrome devtools frontend 源碼，然后用它來調(diào)試
43基于 CDP 實現(xiàn) Puppeteer（上）
44基于 CDP 實現(xiàn) Puppeteer（下）
45把 Puppeteer 融入調(diào)試流程來做自動化
46小冊總結(jié)
47（加更）面試必問的異步順序問題，用 Performance 輕松理清