前言 不管是我们Vue还是React项目，线上都是通过Webpack或Vite编译压缩之后的代码，比如： React项目： Vue项目： 这就导致了一个问题：一旦线上出现bug时，首先我们不知道问题是

背景 上周遇到一个生产问题，有一个页面底部有个分享按钮，在生产环境不显示。而同样的代码，在测试环境却是正常的。 如下图所示，左边是生产的，右边是测试环境的。 这是为什么呢？ 心中带着困惑，开启了破案模

在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存，并非指内存在物理上的消失，而是应用分配某段内存后，由于设计错误，导致在该段内存之前就失去了对该段内存的控制。从而造成了内存的浪费。

Source map 想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系。

前言 上周在群里突然被 @ 要我查看生产上出现的问题，由于这个项目比较老 (React15)，既没有埋点也没有接入错误监控，于是会得到如下的这样一个提示信息（以下错误是本地模拟的实际生产效果）： 当你

之前写过用 VSCode Debugger 或者 Chrome DevTools 调试网页和 Node.js 代码，还有各种打断点的方式。 但只是讲了如何使用，很多同学不知道为什么要用 debugge

前端工作中，不仅编码很重要，重现bug，解决bug的能力同样重要。而这些都离不开代码调试。现就一些调试技巧做出总结。