这门课解决什么工作场景

日常写前端，真正耗时的往往不是从零写代码，而是排查“为什么报错”“样式为什么被覆盖”“接口数据为什么没生效”。多数人遇到问题习惯到处塞 console.log，或者靠刷新页面碰运气。这门课针对的就是这个低效场景：把断点调试、网络抓包、源码映射串成一套确定的工作流程。它不教你写组件，而是教你在代码已经出问题时，怎么快速定位到具体那一行、那一次网络请求、那一段框架内部逻辑。

适合什么基础，建议先看哪几块

这套资料不适合完全没写过 JavaScript 的新手。它默认你已经能独立写 React 或 Vue 业务页面，但每次遇到复杂报错就卡壳。如果你只停留在 console.log 的水平，建议优先看 Chrome DevTools 基础断点、VSCode Debugger 配置详解，以及 sourcemap 原理这几块。这几部分能帮你理解“为什么编辑器里的断点能映射到浏览器压缩后的代码”。Node.js 调试和框架源码调试部分难度陡升，适合已经有一定调试经验、想深入理解框架底层执行逻辑的读者，新手不要一上来就死磕源码。

学完能独立做什么，资料怎么配合练习

学完之后，你应该能在接手一个陌生项目时，直接在 VSCode 里打断点单步调试 React 或 Vue 业务代码，能通过 Charles 拦截并篡改接口数据来测试边界情况，还能自己配置 webpack 的 sourcemap 解决打包后无法定位的问题。资料配合练习的方法很直接：先通读 Debugger 配置详解，照着在自己当前的工程项目里把调试器跑通；然后拿实战案例里的 React 和 Vue 调试章节做对照，在自己的业务代码里复现断点、条件断点和日志点操作。遇到框架行为不符合预期时，再尝试按源码调试章节的步骤，把断点打进框架源码里看执行链路。不要只看文字，必须有一个真实的本地项目边看边操作，否则配置项改了也不知道哪里起作用。


掌握 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 融入调试流程来做自动化

*   小册总结