00 课程介绍

你会学到什么？

1. 由浅入深，深度掌握各种前端调试工具；
2. 全面进阶，学会网页 + Node.js 代码调试；
3. 实战演练，实战各种主流库的源码调试；
4. 深入原理，实现简易版 Chrome DevTools。

作者介绍

前高德架构组前端工程师，畅销小册《Babel 插件通关秘籍》、《TypeScript 类型体操通关秘籍》作者，对前端编译原理、前端工程化等有深入研究，维护 "神光的编程秘籍" 公众号。

小册介绍

调试能力是前端工程师的必备能力，优秀的调试能力可以让我们在阅读源码、定位性能问题的时候更加得心应手。可以说，想要进一步提升技术水平，我们必须要提升调试能力！

但是，大部分开发者并不重视调试能力，而且就算想要提升，也很难找到优质的内容，比如说：

• 工作了很多年，依然是通过 console 日志来调试，觉得没有必要会那么多；
• 知道调试和源码之间关系紧密，但想着读不懂源码也没关系，反正当下也用不到；
• 即使想要提高自己的调试能力，因为找不到合适的方法，暂时搁置了；
• ……

基于此，神说要有光筹备了这本小册，主要围绕 VSCode Debugger 和 Chrome DevTools 这两个工作中最常用的调试工具展开，并且按照先学会使用再深入原理的设计思路，先讲解工作中常用的网页调试和 Node.js 调试部分，带你熟悉各种调试工具的原理，让你能调试不同环境下的各种库的源码，然后再带你动手去自定义调试工具，真正做到全面进阶！

• 网页调试：讲解 VSCode Debugger 调试网页的 JS，学会 sourcemap 的使用，实战 Vue、React 项目和它们的源码调试。
• Node.js 调试：学习多进程、多线程、远程调试，以及命令行工具的调试，能够实战 VSCode、Nest.js、TypeSript、Eslint 等库的源码调试。
• Chrome DevTools 使用：用 Perfomance 分析性能，用 Memory 分析内存、用 Layers 分析图层，用 LightHouse 评分等。
• 调试工具原理：讲解 CDP 协议，并基于 CDP 实现部分 Chrome DevTools 的功能，还会实现一个 mini puppeteer。

相信学完这本小册，定位性能问题、阅读源码对你来说将不再是难题！

适宜人群

工作中会用到调试工具的所有前端工程师。如果你没有深入使用经验，想通过调试源码实现进阶，这本小册非常适合你！