| 失效链接处理 |
|
前端er必备技能 - 前端调试通关秘籍 PDF 下载
相关截图：
 主要内容：
课程主要分为四部分内容：⽤ VSCode Debugger 调试⽹⻚的 JS、⽤ VSCode Debugger 调试 Node.js、⽤
Chrome DevTools 调试⽹⻚、调试⼯具的原理和实现简易版调试⼯具。
⾸先，我们会学习如何⽤ VSCode Debugger 调试⽹⻚，以 React 项⽬为例，然后我们会过⼀遍 VSCode
Chrome Debugger 的配置，之后再调试下 Vue 项⽬。
这个过程中会⽤到 sourcemap，所以接下来会讲 sourcemap 的原理和作⽤，webpack 的 sourcemap 配置，然
后再⽤这些知识来调试 React、Vue 源码。
调试完 Vue、React 项⽬和 Vue、React 源码之后，相信任何⽹⻚的 JS 你都会调试了。
因为调试配置创建比较⿇烦，接下来会讲⽤ VSCode Snippets 简化它的创建。
之后会进入 Node.js 的调试部分，我们会学习如何⽤ VSCode Debugger 调试 Node.js 代码，过⼀遍 VSCode
Node Debugger 的各种配置，之后调试下 Nest.js 源码。
接下来会讲命令⾏⼯具的两种调试⽅式，然后再调试下 ESLint、Babel、TypeScript 的源码。
经过这些实战案例之后，相信你对调试各种 Node.js 的代码也得⼼应⼿了。
然后我们再来学习 Chrome DevTools：
我们会学习 Chrome DevTools 的 6 种打断点的⽅式、⽤ Performance ⼯具分析和优化⽹⻚性能、⽤
LightHouse ⼯具检测⻚⾯性能、⽤ Memory ⼯具分析内存问题、⽤ Layers ⼯具进⾏图层分析等。
相信学完这些之后，你会对每天都⽤的 Chrome DevTools 有⼀个更全⾯和深入的掌握。
之后会讲如何调试移动端⽹⻚，包括安卓和 ios 的⽹⻚。因为⽹⻚调试离不开代理，所以我们还会学习 Charles
的使⽤。
学完这些之后，相信你对⽹⻚、Node.js 的调试都已经挺熟悉的了。
接下来我们深入下调试⼯具的原理，我们会⾸先讲⼀下 Vue DevTools、React DevTools 这种⾃定义调试⼯具的
实现原理，并且⾃⼰实现⼀个简易版 React DevTools。
接下来讲解 Chrome DevTools 的实现原理，包括 CDP 协议，puppeteer 也是基于这个实现的，我们会实现
mini puppeteer 来深入理解 CDP。
之后会分别实现 Chrome DevTools 的各个部分的功能，当然，只是简易版。
学完各种调试⼯具的实现原理之后，相信你⽤各种调试⼯具的时候都会更加得⼼应⼿，⽽且如果需要⾃研调试
⼯具的话，你也会有思路。
到了这⾥，调试也算学的差不多了，最后会做⼀个总结，然后结束本⻔课程。
课程中涉及到 Vue、React、Nest.js、ESLint、TypeScript 等源码的调试，如果你对某些库的源码感兴趣，也可以评
论区告诉我，我会把它的源码调试⽅式加到课程⾥。
希望这⻔课能帮助⼤家“通关” 各种调试⼯具，全⾯提升调试能⼒，各种源码的调试对你来说都不再是难题。
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
