資料目錄：

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