https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes tasks.json 在项目的 .vscode 目录创建 tasks.json 文件,然后将下方内容粘贴进去: {"version":"2.0.0","tasks":[{"label":"vuejs: start","type":"npm",// 需要执行的命令(对应于 package.json 中的 scripts 命令)"script":...
要在VS Code中调试Vue应用,可以遵循以下几个步骤:1、安装必要的扩展插件,2、配置调试环境,3、启动调试模式。这些步骤将帮助你在开发过程中更有效地检测和解决问题。 一、安装必要的扩展插件 首先,你需要在VS Code中安装一些必要的扩展插件,以便支持Vue和调试功能。 Vetur:这是一个为Vue.js开发提供丰富支持的插件,...
VS code 利用Debugger for Chrome插件 debug vue项目 先用命令行启动项目 launch.json { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问:https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0", "configurations": [ { "type": "chrome", "...
步骤2:创建Vue项目 你可以使用Vue CLI创建新的Vue项目。执行以下命令: npminstall-g@vue/cli vue create my-vue-app 1. 2. 这段代码将全局安装Vue CLI,然后创建一个名为my-vue-app的新项目。 步骤3:配置VS Code的调试环境 在你的Vue项目中,打开.vscode文件夹(如果不存在请创建一个),新建一个名为launch....
code ./debug-vuejs-project-with-vscode code是 VS Code 自带的命令,如果你运行时提示没有此命令,可以看官方文档launching-from-the-command-line[2]设置一下。 debug-vuejs-project-with-vscode是我的项目名称。 生成sourcemap 文件 Vite 如果是通过create-vue[3]创建的项目,则修改vite.config.ts配置文件,在开...
code是 VS Code 自带的命令,如果你运行时提示没有此命令,可以看这里设置一下。 debug-vuejs-project-with-vscode是我的项目名称。 生成sourcemap 文件 Vite 如果是通过create-vue创建的项目,则修改vite.config.ts配置文件,在开发环境生成 sourcemap 文件。
1. 通过第一步的方式以远程调试打开的方式打开 Chrome 2. 在 vue 项目中执行npm run dev以调试方式启动项目 3. 点击 VS Code 左侧边栏的调试按钮,选择Attach to Chrome并点击绿色开始按钮,正常情况下就会出现调试控制条。 现在就可以在 vue 文件的 js 代码中打断点进行调试了。
保存launch.json文件,之后在VS Code的调试活动面板运行和调试下拉框里面选择 Lanuch Edge,点击按钮进行调试就可以打开一个Edge窗口。 注意启动调试之前,还需要修改Vue的调试工具支持 devtool: 'source-map',注意不同的Vue CLI版本devtool 设置所在的文件不同,详细内容请参考Vue官方文档: ...
从VS Code 启动应用 我们这里假设端口号为8080。如果与实际情况不符 (比如8080端口已经被占用且 Vue CLI 为你自动选取了另一个端口号),可以修改相应的配置。 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个launch.json的文件,选择Chrome/...