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

就可以调试啦!

相关推荐
pu_taoc8 小时前
深入剖析:基于epoll与主从Reactor模型的高性能服务器设计与实现
服务器·c语言·c++·vscode
数字冰雹11 小时前
图观 模型编辑器
编辑器
学习3人组18 小时前
Node.js模块化开发实训案例
node.js·编辑器·vim
YoungHong199220 小时前
一行配置解决claude code 2.0版本更新后 vscode 插件需要登录的问题
ide·vscode·编辑器
Blue桃之夭夭20 小时前
git和VScode
ide·git·vscode
蜀中廖化1 天前
python VSCode中报错 E501:line too long (81 > 79 characters)
开发语言·vscode·python
shimly1234561 天前
vscode 指定连接其它版本的 linux
ide·vscode·编辑器
___波子 Pro Max.2 天前
VS Code文件监视排除设置详解
vscode
larry_dongy2 天前
【学习记录】vscode+ros2+cpp调试
vscode·学习
vortex52 天前
vscode-background 扩展的原理、配置和使用
ide·vscode·编辑器