作为前端开发，基本上每天都要调试Vue/React代码。不知道大家是怎么调试的，不过我猜有几种：不调试，直接看代码发现问题console.log打印日志使用ChromeDevtools的调试器调试使用VSCode的调试器调试不同的调试方法有不同的效率和体验，我现在基本都是用VSCode调试器来调试，效率高，体验爽。很多同学可能不知道如何使用VSCode来调试网页，本文就来介绍一下。下面分别看看React和Vue：用VSCode调试React代码我用create-react-app创建了一个demo工程，有这么一个组件：运行起来开发服务器：浏览器显示的界面是这样的：如何用VSCode调试呢？我们在根目录下添加一个.vscode/launch.json配置文件：创建一个debug配置，type为chrome，指定debugurl为开发服务器地址。在react代码中打两个断点：然后点击运行：看，XDM，断了！里面有调用栈，当前环境的变量等等，解除断点继续往下。也可以在点击的时候获取对应的事件对象：是不是超级方便！而当你写业务写腻了，想摸鱼看react源码时，只要点击调用栈中的某一帧就可以看到：比如渲染时会调用renderWithHooks方法，而workInProgress对象inside是当前的fiber节点，它的memorizedState属性是hooks存储值的地方：用VSCode调试React代码后，无论是调试业务代码还是查看源码的体验都非常爽。再来看Vue：用VSCode调试Vue代码调试Vue会有点麻烦，需要在上面的基础上对路径做一些额外的映射。因为我们在React中直接写jsx和tsx，和编译后的js文件一一对应，而Vue不是，我们写的是SFC（单文件组件）格式的文件，需要vue-loader来分文件.文件，所以路径单独映射到对应源代码位置。也就是说在调试配置中多了一个sourceMapPathOverrides：怎么映射呢？可以随意在源码中添加调试器，在浏览器中查看当前映射的路径是什么：这里的webpack://test-vue-debug/src/App.vue?11c4就是要映射的路径，所以它映射在哪里？显然是映射到本地路径，即：workspaceRoot是vscode提供的环境变量，也就是项目的根路径。这样映射之后，地址不就变成本地文件了吗？那么本地文件中的断点就会生效：看这里的路径，明显是映射到了项目下的文件。但是映射的时候，后面是有一个hash的。这个散列会改变。我应该怎么办？该路径是可配置的。这其实就是webpack生成sourcemap时的文件路径。可以通过output.devtoolModuleFilenameTemplate配置：Available这个变量可以看文档，不会展开（随便看看）：比如我配置的路径是这样的：那么调试时的文件路径是像这样：不用管前缀，直接看后半部分，不就是去掉了?hash吗？然后映射到本地文件：这样再映射一次，vscode中的断点就会生效：无论是调试Vue业务代码还是看Vue源码，体验都会很爽。综上所述，作为前端工程师，调试Vue和React代码是我们每天都在做的事情。不同的调试方式有不同的体验和效率。所以想给大家介绍一下我平时使用VSCode调试网页的方式。React的调试比较简单，加一个chrome类型的dubug配置就可以了，Vue的调试比较麻烦。您需要进行路径映射。如果路径中有hash，则需要更改生成路径的配置，然后map（但也只需要配置一次）。使用VSCode调试React/Vue代码非常方便，无论是调试业务代码还是查看源码。你不妨试一试，它会让调试变得很有趣。
