掘金小册 前端调试通关秘籍

掘金小册 前端调试通关秘籍

课程介绍

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

掘金小册 前端调试通关秘籍

课程目录：

1、如何阅读本小册？

2、初识调试

3、如何调试网页的 JS（以 React 为例）

4、VSCode Chrome Debugger 配置详解

5、sourcemap 的原理和作用

6、Webpack 的 sourcemap 配置

7、实战案例：调试 Vue 项目

8、VSCode Chrome Debugger 断点映射的原理

9、实战案例：调试 React 源码

10、实战案例：调试 Vue 源码

11、用 VSCode Snippets 快速创建调试配置

12、如何调试 Node.js 代码

13、跑 npm scripts，有更香的方式

14、VSCode Node Debugger 配置详解

15、调试代码会遇到的 9 种 JS 作用域

16、实战案例：调试 Nest.js 项目和源码

17、命令行工具的两种调试方式（以 ESLint 源码调试为例）

18、实战案例：调试 patch-package 源码

19、实战案例：调试 Babel 源码

20、实战案例：调试 Vite 源码

21、实战案例：调试 TypeScript 源码

22、如果通过变量写出更灵活的调试配置？

23、如何灵活的调试 Jest 测试用例

24、打断点的 7 种方式，你用过几种？

25、实战案例：调试 Ant Design 组件源码

26、实战案例：调试 ElementUI 组件源码

27、如何用 Performance 工具分析并优化性能

28、会用 Performance 工具，就能深入理解 Event Loop

29、面试必问的异步顺序问题，用 Performance 轻松理清

30、Web Vitals 如何计算？如何衡量网页性能？

31、console.log 会导致内存泄漏？用 Performance 和 Memory 分析下（上）

32、console.log 会导致内存泄漏？用 Performance 和 Memory 分析下（下）

33、如何用 Layers 分析网页的图层

34、Chrome DevTools 小功能集锦

35、放弃 console.log 吧！用 Debugger 你能读懂各种源码

36、如何远程调试 android 移动端网页

37、如何远程调试 ios 移动端网页

38、远程调试移动端网页的原理

39、如何用 Charles 断点调试 https 请求？

40、Charles 全功能速通（上）

41、Charles 全功能速通（下）

42、线上报错如何直接调试本地源码？

43、手动对接 CDP 来理解 Chrome DevTools 实现原理

44、实现 Chrome DevTools 的 Coverage 功能

45、编译 chrome devtools frontend 源码，然后用它来调试

46、基于 CDP 实现 Puppeteer（上）

47、基于 CDP 实现 Puppeteer（下）

48、把 Puppeteer 融入调试流程来做自动化

49、小册总结