小册上新|前端调试通关秘籍

2,771 阅读3分钟

作为前端工程师,调试能力是我们的必备能力。但是,大部分开发者并不重视它,比如说:

  • 工作了很多年,依然是通过 console 日志来调试,觉得没有必要会那么多;
  • 知道调试和源码之间关系紧密,但想着读不懂源码也没关系,反正当下也用不到;
  • 想要提高自己的调试能力,却找不到合适的方法,也就暂时搁置了;

事实上,优秀的调试能力可以让我们在阅读源码、定位性能问题的时候更加得心应手。因为调试本质上就是把代码在某个平台运行时的状态通过某种方式暴露出来,传递给开发工具做 UI 展示和交互,辅助开发者排查问题,梳理流程,了解代码运行状态等等。

这里的某个平台可以是浏览器、Node.js、Electron、小程序等任何能执行 JS 代码的平台。暴露出的运行时状态可能是调用栈、执行上下文,或者 DOM 的结构、React 组件的状态等。可以说,想要进一步提升技术水平,我们必须要提升调试能力!

如何提升调试能力?

我们刚才说了,调试本质上就是把代码运行的状态暴露给调试工具去做一些展示和交互。比如说,我们可以用 Chrome DevTools 调试网页查看元素、网络请求,断点运行 JS,用 Performance 工具分析性能等等,可以用 VSCode Debugger 调试 Node.js,同时调试多个进程的代码;可以用 React DevTools 和 Vue DevTools 的 chrome 插件来调试 React、Vue 组件,调试 React Native 应用。

因此,无论我们使用哪种调试工具,这背后的核心原理都是相通的,也就是说提升调试能力最关键的是要掌握这些调试工具的通用原理

常用的调试工具有 Chrome DevTools、VSCode Debugger、Vue/React DevTools。它们都有 frontend backend 、调试协议、信道这四要素。只要我们抓住这些相同的部分,来分析它们是如何组成调试工具的,理解不同部分的设计原因,很容易就能搞懂各种调试工具的原理啦!

小册是如何设计的?

基于此,神说要有光与稀土掘金共同筹备了《前端调试通关秘籍》这本小册。

前阿里架构组前端工程师,《Babel 插件通关秘籍》《TypeScript 类型体操通关秘籍》小册作者,对前端编译原理、前端工程化等有深入研究。

小册主要围绕 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。

我相信,如果你能跟着学完这本小册,定位性能问题、阅读源码将不再是难题!

上新特惠,限时6折

9 月 21 日~ 30 日,正值上新特惠期,仅需 ¥29.94 就能和神说要有光一起深入学习前端调试!

👇🏻👇🏻👇🏻还等什么,快来加入学习吧!

作者的另外小册《Babel 插件通关秘籍》《TypeScript 类型体操通关秘籍》也在 8 折特惠中,欢迎选购~

宣传海报(1242x2650)-站内文章.jpg