你会学到什么？
- 由浅入深，深度掌握各种前端调试工具；
- 全面进阶，学会网页 + Node.js 代码调试；
- 实战演练，实战各种主流库的源码调试；
- 深入原理，实现简易版 Chrome DevTools。
课程简介
调试能力是前端工程师的必备能力，优秀的调试能力可以让我们在阅读源码、定位性能问题的时候更加得心应手。可以说，想要进一步提升技术水平，我们必须要提升调试能力！
但是，大部分开发者并不重视调试能力，而且就算想要提升，也很难找到优质的内容，比如说：
- 工作了很多年，依然是通过 console 日志来调试，觉得没有必要会那么多；
- 知道调试和源码之间关系紧密，但想着读不懂源码也没关系，反正当下也用不到；
- 即使想要提高自己的调试能力，因为找不到合适的方法，暂时搁置了；
- ……
基于此，神说要有光筹备了这本小册，主要围绕 VSCode Debugger 和 Chrome DevTools 这两个工作中最常用的调试工具展开，并且按照先学会使用再深入原理的设计思路，先讲解工作中常用的网页调试和 Node.js 调试部分，带你熟悉各种调试工具的原理，让你能调试不同环境下的各种库的源码，然后再带你动手去自定义调试工具，真正做到全面进阶！
- 网页调试：讲解 VSCode Debugger 调试网页的 JS，学会 sourcemap 、DevTools 的 Performance 等工具的使用，能够实战 Vue、React 项目和它们的源码调试。
- Node.js 调试：学习多进程、多线程、远程调试，以及命令行工具的调试，能够实战 VSCode、Nest.js、TypeSript、Eslint 等库的源码调试。
- 自定义调试工具：深入讲解各种调试工具的原理，包括 Chrome DevTools、VSCode Debugger、Vue DevTools 和 React DevTools ，带你实现简易版 Chrome DevTools 和 React DevTools。
相信学完这本小册，定位性能问题、阅读源码对你来说将不再是难题！
课程目录
1 如何阅读本小册？
2 初识调试
3 如何调试网页的 JS
4 VSCode Chrome Debugger 配置详解
5 sourcemap 的原理和作用
6 Webpack 的 sourcemap 配置
7 实战案例：调试 Vue 项目
8 实战案例：调试 React 源码
9 实战案例：调试 Vue 源码
10 用 VSCode Snippets 快速创建调试配置
11 如何调试 Node.js 代码
12 VSCode Node Debugger 配置详解
13 实战案例：调试 Nest.js 源码
14 命令行工具的两种调试方式
15 实战案例：调试 EsLint 源码
16 实战案例：调试 Babel 源码
17 实战案例：调试 TypeScript 源码
18 实战案例：调试 VSCode 源码
19 Chrome DevTools 打断点的 6 种方式 20 Performance 工具的作用和原理
21 实战案例：用 Performance 分析并优化网页性能
22 什么是 Web Vitals
23 LightHouse 工具的作用和原理
24 如何用 Memory 分析内存
25 如何用 Safari DevTools 进行图层分析
26 Chrome DevTools 小技巧集锦
27 如何调试 android 和 ios 移动端网页
28 深度使用代理工具 Charles
29 Node.js 如何分析性能
30 Node.js 如何分析内存问题
31 Vue DevTools 原理解析
32 React DevTools 原理解析
33 实战案例：实现简易版 React DevTools
34 基于 Chrome DevTools frontend 实现自己的调试工具
35 基于 Electron 实现一个小程序调试工具
36 实现 Chrome DevTools 的 Coverage 功能
37 实现 Chrome DevTools 的 Network 功能
38 实现 Chrome DevTools 的 Elements 功能
39 实现简易的 JS Debugger
40 小册总结
讲师介绍
神说要有光，前阿里架构组前端工程师
前阿里架构组前端工程师，畅销小册作者，对前端编译原理、前端工程化等有深入研究。