vscode使用内置插件断点调试vue2项目

1、首先项目中要开启source-map

在vue.config.js 文件中

javascript 复制代码
module.exports = {
	configureWebpack: {
			devtool: process.env.NODE_ENV !== "production" ? "source-map" : '',
	}
}

2、项目根目录新建.vscode/launch.js文件

javascript 复制代码
{
    "configurations": [
      {
        "type": "chrome",       // 模式:chrome、edge 可选
        "name": "vuejs: chrome",        // 调试的名称,可以自定义
        "request": "launch",    // 请求配置类型:可以是 attach 或者 launch
        "url": "http://localhost:9000",//url的端口按照实际启动项目的端口来填写。需要自己手动修改
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        //就是我们开启sourcemap之后看到的代码地址配置,其映射的地址为${workspaceFolder} (表示文件的工作空间目录) 下的src。
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      },
    ]
  }

3、在想要调试的代码前打断点

4、vscode左侧点击运行和调试

选择我们刚刚在launch.json文件中命名的vuejs: chrome,点击绿色三角按钮,就启动了一个chrome

就可以调试啦!

相关推荐
csdn_aspnet2 小时前
如何从自定义或本地仓库安装 VsCode 扩展
ide·vscode
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
CN-Dust2 小时前
【VSCode】复制到下一行快捷键
ide·vscode·编辑器
SoveTingღ10 小时前
【开发环境配置】VScode里面配置cmake遇到的问题
c语言·vscode·cmake·嵌入式软件·开发环境配置
vsropy10 小时前
VScode输出中文乱码问题解决
ide·vscode·编辑器
患得患失94910 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
DIY全栈开发12 小时前
ESP32S3 Ubuntu vscode如何使用USB-JTAG调试
linux·vscode·ubuntu
Hi_kenyon15 小时前
Vscode的常用快捷键(摆脱鼠标计划)
ide·vscode·计算机外设
唯之为之18 小时前
如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等
vscode·ai编程
要加油哦~2 天前
工具 | 解决 VSCode 中的 Delete CR 问题
ide·vscode·编辑器