前端调试通关秘籍

📄️ 01-初识调试

作为前端开发，调试是每天都会接触的概念。你觉得什么是调试呢？

网页调试

上节我们学会了如何用 VSCode Debugger 调试网页的 JS，其实它还有很多有用的配置项，这节我们一起来过一遍：

学习调试，sourcemap 是绕不开的概念，有了它才能直接调试源码。

上节我们学习了什么是 sourcemap，这还不够，webpack 对 sourcemap 做了很多封装。

前面几节讲了用 VSCode Debugger 调试 Vue 和 React 项目，但同学们经常会遇到一些断点相关的问题，比如：

这节我们来调试下 React 的源码。

使用Snippets

学会了网页里 JS 的调试，我们再来学下 Node.js 代码的调试。

每个前端项目都有 npm scripts，我们会用 npm scripts 来组织编译、打包、lint 等任务。

前面两节我们学习了怎么调试 Node.js、npm scripts，这节我们来过一遍 VSCode Node Debugger 的常用配置。

作用域想必大家都知道，就是变量生效的范围，比如函数就会生成一个作用域，声明的变量只在函数内生效。

我们学习了如何调试网页和 Node.js 的代码，可以在代码某一行打个断点，代码执行到这里的时候就会断住，可以看它的作用域、调用栈等。

调试

学习使用Performance

Chrome DevTools 的 Performance 工具是性能分析和优化的利器，因为它可以记录每一段代码的耗时，进而分析出性能瓶颈，然后做针对性的优化。

用 Performance 工具分析网页的时候，你可能会看到 FP、DCL、FCP、L、LCP 这些东西：

console.log内存泄漏

图层Layers

Chrome DevTools 有很多有用的小功能，这节就专门梳理一下这个：

异步问题