掌握 VSCode Debugger + Chrome DevTools + Charles，全面提升调试能力！

*   如何阅读本小册？

*   初识调试

*   如何调试网页的 JS（以 React 为例）

*   VSCode Chrome Debugger 配置详解

*   sourcemap 的原理和作用

*   Webpack 的 sourcemap 配置

*   结合 click-to-react-component 打造超级爽的 React 调试体验

*   实战案例：调试 Vue 项目

*   VSCode Chrome Debugger 断点映射的原理

*   实战案例：调试 React 源码

*   实战案例：调试 Vue 源码

*   用 VSCode Snippets 快速创建调试配置

*   如何调试 Node.js 代码

*   跑 npm scripts，有更香的方式

*   VSCode Node Debugger 配置详解

*   调试代码会遇到的 9 种 JS 作用域

*   实战案例：调试 Nest 项目和源码

*   命令行工具的两种调试方式（以 ESLint 源码调试为例）

*   实战案例：调试 patch-package 源码

*   实战案例：调试 Babel 源码

*   实战案例：调试 Vite 源码

*   实战案例：调试 TypeScript 源码

*   如何通过变量写出更灵活的调试配置？

*   如何灵活的调试 Jest 测试用例

*   打断点的 7 种方式，你用过几种？

*   实战案例：调试 Ant Design 组件源码

*   实战案例：调试 ElementUI 组件源码

*   如何用 Performance 工具分析并优化性能

*   会用 Performance 工具，就能深入理解 Event Loop

*   面试必问的异步顺序问题，用 Performance 轻松理清

*   Web Vitals 如何计算？如何衡量网页性能？

*   console.log 会导致内存泄漏？用 Performance 和 Memory 分析下（上）

*   console.log 会导致内存泄漏？用 Performance 和 Memory 分析下（下）

*   如何用 Layers 分析网页的图层

*   Chrome DevTools 小功能集锦

*   通过调试技术，理清 b 站视频播放速度很快的原因

*   放弃 console.log 吧！用 Debugger 你能读懂各种源码

*   如何远程调试 android 移动端网页

*   如何远程调试 ios 移动端网页

*   远程调试移动端网页的原理

*   如何用 Charles 断点调试 https 请求？

*   Charles 全功能速通（上）

*   Charles 全功能速通（下）

*   线上报错如何直接调试本地源码？

*   手动对接 CDP 来理解 Chrome DevTools 实现原理

*   实现 Chrome DevTools 的 Coverage 功能

*   编译 chrome devtools frontend 源码，然后用它来调试

*   基于 CDP 手写 puppeteer（上）

*   基于 CDP 手写 puppeteer（下）

*   把 Puppeteer 融入调试流程来做自动化

*   小册总结