前端er必备技能-前端调试通关秘籍_网页调试工具资源-CSDN文库

需积分: 5 37 浏览量 2024-02-22 12:47:37 上传评论收藏 153.88MB PDF 举报

资源推荐

资源详情

资源评论

01.md 2/13/2023

1 / 2

众所周知，阅读源码是前端进阶的⼀种⽅式，但很多同学不会使⽤调试⼯具，不知道该怎么⾼效的阅读源码。

市⾯上也没有课程专⻔讲调试的，⽽这⻔课程就是弥补这个领域的空⽩。

我们会学习⽹⻚、Node.js 的调试，还会学习调试⼯具的实现原理，并且⾃⼰实现⼀个简易版⼩程序调试⼯

具、React DevTools 还有 Chrome DevTools。

课程主要分为四部分内容：⽤ 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 的调试都已经挺熟悉的了。

02.md 2/13/2023

1 / 9

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

有同学说，我⽤ Chrome DevTools 调试⽹⻚，可以查看元素，⽹络请求，断点运⾏ JS，⽤ Performance

⼯具分析性能等，这是⽹⻚的调试。

有同学说，我⽤ VSCode Debugger 调试 Node.js，可以同时调试多个进程的代码。这是 Node.js 的调

试。

有同学说，我⽤ React DevTools 和 Vue DevTools 的 chrome 插件来调试 React、Vue 组件，还会⽤独立

的 React DevTools 调试 React Native 应⽤。这是我常⽤的调试⼯具。

没错，这些都属于调试。那它们有什么共同特点呢？

它们都是把运⾏的状态暴露给调试⼯具，做⼀些展⽰和交互。

所以，我们可以给调试下个定义：

代码在某个平台运⾏，把运⾏时的状态通过某种⽅式暴露出来，传递给开发⼯具做 UI 的展⽰和交互，辅助开

发者排查问题、梳理流程、了解代码运⾏状态等，这个就是调试。

这⾥的某个平台，可以是浏览器、Node.js、Electron、⼩程序等任何能执⾏ JS 代码的平台。

暴露出的运⾏时状态，可能是调⽤栈、执⾏上下文，或者 DOM 的结构，React 组件的状态等。

暴露出这些数据的⽅式⼀般是通过基于 WebSocket 的调试协议，当然也会有别的⽅式。

那常⻅的调试⼯具都是怎么实现的，有没有什么通⽤的原理呢？

我们分别来看⼀下：

Chrome DevTools 原理

Chrome DevTools 分为两部分，backend 和 frontend：

backend 和 Chrome 集成，负责把 Chrome 的⽹⻚运⾏时状态通过调试协议暴露出来。

frontend 是独立的，负责对接调试协议，做 UI 的展⽰和交互。

两者之间的调试协议叫做 Chrome DevTools Protocol，简称 CDP。

传输协议数据的⽅式叫做信道（message channel），有很多种，比如 Chrome DevTools 嵌入在 Chrome ⾥

时，两者通过全局的函数通信；当 Chrome DevTools 远程调试某个⽬标的代码时，两者通过 WebSocket 通

信。

frontend、backend、调试协议（CDP）、信道，这是 Chrome DevTools 的 4 个组成部分。

剩余689页未读，继续阅读

内容反馈

end-less

粉丝: 43
资源: 21

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip