50 小册总结

代码运行的时候，我们想看到它的运行细节，这就需要调试。

我们平时会用各种调试工具： Chrome DevTools、VSCode Debugger、Vue/React DevTools 等。

这些调试工具都有 4 要素：frontend、backend、调试协议、信道。

同一个 backend 可以对接不同的 frontend，所以我们可以用 Chrome DevTools 或者 VSCode Debugger 来调试 Node.js 或者网页代码。它们只是不同的 frontend。

我们学习了用 VSCode Debugger 来调试网页，包括 Vue、React 项目，还有 Vue、React 源码。

还学习了用 VSCode Debugger 调试 Node.js 代码和 npm scripts，我们调试了 babel 源码、nest.js 项目和源码、typescript 源码、eslint 源码、patch-package 源码等。

因为代码一般会经过编译再运行，而我们想直接调试源码，这时候就需要 sourcemap 了。

我们学习了 sourcemap 的结构和如何用 source-map 包生成和解析 sourcemap，还有 webpack 的几种 sourcemap 生成方式。

学完了这些，相信网页和 Node.js 的调试对你来说都不再是问题，各种源码也都是这个套路来调试。

我们学了 7 种打断点的方式，学了各种作用域。断点调试最大的好处是可以看到代码执行路线，以及执行过程中各种变量的变化，这对于理清代码逻辑、定位问题非常有帮助，是 console.log 比不了的。

我们还学习了 Chrome DevTools 的各种工具，包括 Performance、Memory、Layers、LightHouse 等，这些工具在特定场景下都挺有用的。

此外，我们学习了移动端网页的调试，包括安卓、ios 的 USB 调试的方式和原理，以及 wifi 调试的原理。

只调试代码很多情况下是不够的，我们还要会用 http 代理工具抓包调试，所以我们过了一遍 charles 全部的功能。

最后，我们学习了 Chrome DevTools 的实现原理，也就是 CDP 协议，我们对接 CDP 协议自己实现了 backend，也实现了下 frontend。经过这俩案例就能理解基于 CDP 的调试工具的原理了，我们平时用的小程序调试工具、跨端调试工具，基本都是对接了 CDP 的。

puppeteer 这种自动化测试工具，它能控制 chrome 的原理也是基于 CDP，我们自己实现了一个 mini puppeteer，还把它融入到了调试流程中。很多有意思的工具都是基于 CDP 实现的。

这就是这本小册的全部内容了。

当然，调试的内容远不止这些，后面会不定期加餐。

想要成为前端的调试高手，首先要能用各种工具调试网页和 Node.js 代码，能用 sourcemap 来调试最初的源码，能灵活运用各种打断点方式，会用 chrome devtools 的各种工具，能灵活使用 charles 等 http 代理工具抓包调试，还要懂一些调试的原理。

希望这本小册能帮大家全面提升调试能力，通关前端调试！