课程介绍
神说要有光筹备了这本小册,主要围绕 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、小册总结