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

就可以调试啦!

相关推荐
2501_938791831 小时前
服务器上的 VsCode:Github Copilot 显示 “连接失败”?网络与权限排查
服务器·vscode·github
Molesidy1 小时前
【Embedded System】【CMake】Windows下CMake+VSCode的开发环境搭建以及初步认识
ide·vscode·编辑器·cmake
不如摸鱼去3 小时前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
oioihoii6 小时前
在VSCode中配置Rust开发环境的详尽指南
ide·vscode·rust
2501_9387820917 小时前
《UE4 蓝图基础:蓝图编辑器打开与节点连接的核心逻辑》
编辑器·ue4
哲此一生9841 天前
Vscode中选择Conda环境
ide·vscode·编辑器
怒放的生命19911 天前
前端vue项目在vscode使用插件部署到服服务器的方法
服务器·ide·vscode
朱嘉鼎1 天前
VSCode + Copilot
ide·vscode·编辑器
我是苹果,不是香蕉1 天前
vscode使用verilog format插件教程
ide·vscode·编辑器
芙蓉王真的好12 天前
VSCode Copilot 魔改对比:智谱 GLM-4.6 与其他大模型接入流程差异解析
ide·vscode·copilot