无题

众所周知，阅读源码是前端进阶的一种方式，但很多同学不会使用调试工具，不知道该怎么高效的阅读源码。市面上也没有课程专门讲调试的，而这门课程就是弥补这个领域的空白。

我们会学习网页、Node.js 的调试，还会学习调试工具的实现原理，并且自己实现一个简易版小程序调试工具、React DevTools 还有 Chrome DevTools。

课程主要分为四部分内容：用 VSCode Debugger 调试网页的 JS、用 VSCode Debugger 调试 Node.js、用 Chrome DevTools 调试网页、调试工具的原理和实现简易版调试工具。

首先，我们会学习如何用 VSCode Debugger 调试网页，以 React 项目为例，然后我们会过一遍 VSCode Chrome Debugger 的配置，之后再调试下 Vue 项目。

这个过程中会用到 sourcemap，所以接下来会讲 sourcemap 的原理和作用，webpack 的 sourcemap 配置，然后再用这些知识来调试 React、Vue 源码。

调试完 Vue、React 项目和 Vue、React 源码之后，相信任何网页的 JS 你都会调试了。

因为调试配置创建比较麻烦，接下来会讲用 VSCode Snippets 简化它的创建。

之后会进入 Node.js 的调试部分，我们会学习如何用 VSCode Debugger 调试 Node.js 代码，过一遍 VSCode Node Debugger 的各种配置，之后调试下 Nest.js 源码。

接下来会讲命令行工具的两种调试方式，然后再调试下 ESLint、Babel、TypeScript 的源码。

经过这些实战案例之后，相信你对调试各种 Node.js 的代码也得心应手了。

然后我们再来学习 Chrome DevTools：

我们会学习 Chrome DevTools 的 6 种打断点的方式、用 Performance 工具分析和优化网页性能、用 LightHouse 工具检测页面性能、用 Memory 工具分析内存问题、用 Layers 工具进行图层分析等。

相信学完这些之后，你会对每天都用的 Chrome DevTools 有一个更全面和深入的掌握。

之后会讲如何调试移动端网页，包括安卓和 ios 的网页。因为网页调试离不开代理，所以我们还会学习 Charles 的使用。

学完这些之后，相信你对网页、Node.js 的调试都已经挺熟悉的了。

接下来我们深入下调试工具的原理，我们会首先讲一下 Vue DevTools、React DevTools 这种自定义调试工具的实现原理，并且自己实现一个简易版 React DevTools。

接下来讲解 Chrome DevTools 的实现原理，包括 CDP 协议，puppeteer 也是基于这个实现的，我们会实现 mini puppeteer 来深入理解 CDP。

之后会分别实现 Chrome DevTools 的各个部分的功能，当然，只是简易版。

学完各种调试工具的实现原理之后，相信你用各种调试工具的时候都会更加得心应手，而且如果需要自研调试工具的话，你也会有思路。

到了这里，调试也算学的差不多了，最后会做一个总结，然后结束本门课程。

课程中涉及到 Vue、React、Nest.js、ESLint、TypeScript 等源码的调试，如果你对某些库的源码感兴趣，也可以评论区告诉我，我会把它的源码调试方式加到课程里。

希望这门课能帮助大家“通关” 各种调试工具，全面提升调试能力，各种源码的调试对你来说都不再是难题。