使用 vscode + chrome debuger断点调试 Vue 程序

1、在webpack配置文件config/index.js中新增配置:

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'source-map',

2、在项目中添加.vscode/launch.json文件

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9527/",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*.vue": "${webRoot}/*.vue",
                "webpack:///./src/*.js": "${webRoot}/*.js"
            }
        }
    ]
}

 

posted @ 2021-11-12 22:13  程序人生♨︎  阅读(230)  评论(0编辑  收藏  举报