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

就可以调试啦!

相关推荐
山顶望月川8 小时前
并行科技MaaS平台支持文心4.5系列开源模型调用
人工智能·机器学习·编辑器
GDAL9 小时前
Node.js REPL 教程
node.js·编辑器·vim
myloveasuka10 小时前
信号操作集函数
linux·运维·服务器·c语言·c++·vscode
向宇it10 小时前
【unity游戏开发——网络】网络游戏通信方案——强联网游戏(Socket长连接)、 弱联网游戏(HTTP短连接)
网络·http·游戏·unity·c#·编辑器·游戏引擎
成遇10 天前
在Vscode中安装Sass并配置
vscode·rust·sass
切韵10 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器
API开发10 天前
苹果芯片macOS安装版Homebrew(亲测) ,一键安装node、python、vscode等,比绿色软件还干净、无污染
vscode·python·docker·nodejs·openssl·brew·homebrew
微风好飞行10 天前
Vite 打包 vscode 扩展遇到的模块问题
javascript·vscode·vite
Jay_51510 天前
如何获取 vscode 的 vsix 离线插件安装包
vscode·vsix
F_D_Z10 天前
【vim】通过vim编辑器打开、修改、退出配置文件
linux·编辑器·vim