資料目錄：

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