如何使用VSCode调试Vue.js项目？

简介本教程将使用一个全新的Vue.js项目作为模板进行配置。您可以按照教程一步一步来，也可以按照教程将配置添加到现有项目中。仓库地址：https://github.com/mrlmx/debug-vuejs-project-with-vscode创建项目通过vue提供的create-vue脚手架创建一个vue3项目。npminitvue@latest注意：通过上面的命令，创建的是一个基于vite的项目，而不是基于webpack的项目。然后在VSCode中打开创建好的项目：code./debug-vuejs-project-with-vscodecode是VSCode自带的命令。如果运行的时候提示没有这个命令，可以看到这里设置一下。debug-vuejs-project-with-vscode是我的项目名称。生成sourcemap文件如果vite是通过create-vue创建的项目，在开发环境中修改vite.config.ts配置文件生成sourcemap文件。exportdefaultdefineConfig({build:{sourcemap:true,},//其他配置...});更多配置请参考：https://vitejs.dev/config/build-options.html#build-sourcemapVue如果cli是通过vue-cli创建的项目，修改vue.config.js配置文件，生成一个开发环境中的sourcemap文件。module.exports={configureWebpack:{devtool:"source-map"}//其他配置...};更多配置请参考：https://cli.vuejs.org/guide/webpack.html如果webpack是自己构建的项目，修改自己定义的webpack配置文件，在开发环境生成sourcemap文件.module.exports={devtool:"source-map",//其他配置...};更多配置请参考：https://webpack.js.org/configuration/devtool/#devtool配置文件launch.json通过以下步骤，创建一个launch.json配置文件（如果你的项目中已经存在该文件，可以跳过这一步）选择左侧菜单中的调试图标，打开调试菜单。单击createalaunch.jsonfile创建一个新的配置文件。选择WebApp(Edge)，当然你也可以选择WebApp(Chrome)生成的launch.json文件，大致是这样的（不同版本的VSCode可能略有不同）：{//使用IntelliSense了解一下可能的属性。//悬停以查看现有属性的描述。//更多信息，请访问：https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"pwa-msedge","request":"launch","name":"LaunchEdgeagainstlocalhost","url":"http://localhost:8080","webRoot":"${workspaceFolder}"}]}替换内容生成的launch.json文件配置如下：{"version":"0.2.0","configurations":[{//使用Edge浏览器调试"type":"msedge",//使用Chrome浏览器调试//“类型”：“铬”，“请求”："launch","name":"vuejs:msedge",//项目的访问地址（需要改成你项目开发环境对应的地址和端口号）"url":"http://localhost:5173","webRoot":"${workspaceFolder}","pathMapping":{"/_karma_webpack_":"${workspaceFolder}"},"sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},//设置进入调试环境前需要执行的任务//这个名字对应.vscode中tasks.json文件中的label属性项目目录)"preLaunchTask":"vuejs:start"}]}在上面的配置中，需要注意以下几点：type：VSCode的调试类型。msedge表示使用Edge浏览器进行调试。chrome表示使用Chrome浏览器进行调试。url：浏览器启动时访问的地址。需要改成你项目的开发环境地址。如果一致，则无需修改。preLaunchTask：设置进入调试环境前需要执行的任务。该名称对应项目.vscode目录下tasks.json文件中的label属性。下面将创建tasks.json文件。更多信息：launch.json文件的更多配置请参考：https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributestasks.json在.vscode目录下创建tasks.json文件项目，然后将以下内容粘贴到其中：{"version":"2.0.0","tasks":[{"label":"vuejs:start","type":"npm",//命令待执行（对应package.json中的scripts命令）"script":"dev","isBackground":true}]}执行上述配置时，运行的命令为：npmrundev，如果你的项目是另一个启动命令，然后将其修改为相应的脚本名称。注意：type的其他可选值是shell或者process，不要傻傻的改成yarn。类型：任务的类型。对于自定义任务，可以设置为shell或process。如果设置为shell，该命令将被解释为shell命令（例如：bash、cmd或PowerShell）。如果设置为进程，命令将被解释为要执行的进程。更多信息：tasks.json文件的更多配置请参考：https://code.visualstudio.com/docs/editor/tasks#_custom-taskshttps://code.visualstudio.com/docs/editor/tasks-附录关于VSCodetasks功能的更多信息，请参考：https://code.visualstudio.com/docs/editor/tasksBreakpoint我们稍微改变一下src/views/AboutView.vue文件的内容，然后点击两个断点。在第13行和第19行中，键入了2个Breakpoint（在对应行号左侧，点击鼠标左键打断点）：注意：一定要在开始Debug前设置好断点，否则匹配不到断点。源文件无效，运行的编译文件无法匹配到新的断点，除非修改源文件的代码触发编译，让新生成的编译文件映射到新的断点，我猜测原因是：因为*.vue是sfc格式的文件，脚本、模板、样式这三个模块需要拆分编译，编译后的js文件实际运行，每次修改文件或者重启项目，A会编译新的文件，如果没有提前打断点，源文件和编译后的文件不会关联。T他弹出窗口提示。另外，我发现无论是否提前下断点，启动时都会提示：Thetask'xxx'cannotbetracked。确保定义了问题匹配器。我搜索过，但没有找到特别完美的解决方案。下面介绍两种蹩脚的方法：方案一：如果不在意这个提示，可以每次都点“DebugAnyway”按钮，或者勾选“Remembermychoiceforthistask”，这样就不会每次都提示了你将来运行它。所谓眼不见，心不烦。方案二：去掉launch.json文件中的preLaunchTask属性，在Debugging前手动启动项目。反正配置preLaunchTask的目的就是自动帮你启动项目，所谓自给自足。启动Debug经过以上配置后，就可以在Debug模式下启动项目了。下面介绍一下“快捷键”和“手动启动”两种启动方式。快捷键：F5如果你的项目只有一个Debug配置，可以直接通过F5快捷键启动Debug模式，非常简单方便，推荐日常使用。手动启动如果你的项目有多个Debug配置，launch.json文件的configurations数组有多个配置对象。此时F5快捷键开始第一次配置。如果要启动其他Debug配置，需要手动选择。可以看到，点击“下拉菜单”后，会显示两个配置选项：vuejs:msedge和vuejs:chrome示例中的launch.json配置文件内容如下：{"version":"0.2.0","configurations":[{"type":"msedge","request":"launch","name":"vuejs:msedge","url":"http://localhost:5173","webRoot":"${workspaceFolder}","pathMapping":{"/_karma_webpack_":"${workspaceFolder}"},"sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},"preLaunchTask":"vuejs:start"},{"type":"chrome","request":"launch","name":"vuejs:chrome","url":"http://localhost:5173","webRoot":"${workspaceFolder}","pathMapping":{"/_karma_webpack_":"${workspaceFolder}"},"sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},"preLaunchTask":"vuejs:start"}]}看到这里，你应该已经配置好调试环境了，现在可以愉快的调试一些问题了。在写这篇文章的过程中，我也发现了几个比较头疼的问题，这里简单提一下。之前我们开始说这些问题，我们来看这张图：Mark1:是我们的代码源文件Mark2:运行时打断点后，VSCode编译后自动打开文件，他的名字也可能是：aboutView.vue?t=1661699383436，有个t参数，是毫秒时间戳，应该避免缓存注3：是第一个断点，行号是13.标记4：为第二个断点，行号为19。1、必须先下断点。我们可以看到，在运行过程中，下的断点其实就是编译后的文件。前面我们提到在运行Debug模式后在源文件中添加新的断点在正常情况下是不会匹配的。那么如果我想在调试过程中添加一个新的断点怎么办？方法一：直接在“编译文件”中设置新的断点。这种方法的缺点是：它是一次性断点。因为新的断点是针对这个编译后的文件，如果源文件发生变化，重新编译一个新的文件，那么这个断点就失效了，后面也不会匹配到。方法二：直接在“源文件”中新建断点。这种方法的缺点是需要手动触发编译。前面说过，在源文件中添加新的断点后，无法感知正在运行的编译文件，所以必须触发源文件重新编译生成新的编译文件，这样源文件中的所有断点都会同步映射到新的编译文件。我每次触发重新编译的方式是在任何地方加一行console.log("")，然后每次直接修改打印的内容。2.断点位置不一致。源文件和编译文件断点的行号相同，但是对应的行号是不同的代码，与我们预期的断点位置不一致：对比后可以看到@vue/compiler-sfc自动转换语法糖变成了CompositionAPI风格的代码，并添加了一些辅助代码。这导致单纯根据行号映射断点位置会出现一些问题，存在不可预测的错位。我目前的解决方案是手动将调试器添加到相应的位置，以确保它可以命中我想要的位置。然后在命中断点后在编译文件中添加其他所需的新断点。3、修改后会编译出一个新的文件。如上所述，每次修改源文件后，都会编译出一个新的文件。这会导致编译文件中所有先前的断点都失败。经过一段时间的调试，VSCode中会出现大量无效的断点标记。虽然不影响使用，但是看起来有点大。我暂时没有很好的解决办法，只能在每次调试后点击“RemoveAllBreakpoints”按钮，将所有断点全部移除。以上是我遇到的一些问题。如果你有好的解决办法，可以在评论区告诉我。喜欢它??。