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

最新推荐文章于 2024-08-21 16:07:31 发布

想要成仙的菜鸟前端

最新推荐文章于 2024-08-21 16:07:31 发布

阅读量598

点赞数 4

文章标签： vscode 编辑器前端调试

本文链接：https://blog.csdn.net/qq_44441669/article/details/139928623

版权

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

在vue.config.js 文件中

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

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


{
    "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}/*"
        }
      },
    ]
  }