当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 14:49:11 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”按钮,将所有断点全部移除。以上是我遇到的一些问题。如果你有好的解决办法,可以在评论区告诉我。喜欢它??。