目录

vue2用vscode调试打不上断点

目录

vue2用vscode调试打不上断点

需要设置 sourceMapPathOverrides 首先保证

安装 JavaScript Debugger (Nightly) 插件

vue.config.js 开启 source-map

configureWebpack: {
 devtool: "source-map",
},

sourceMapPathOverrides 里的路径查询

在vue网站按 F12 打开开发者工具,选择 Sources

https://i-blog.csdnimg.cn/direct/e06da7f50aef4a858284a9a0f1409fd9.png

按 Ctrl + P 输入 App.vue,可以查看路径

https://i-blog.csdnimg.cn/direct/07637895c8cd4821bf8817221476e0c6.png

可以看到路径是 webpack://tt/src/

所以设置 sourceMapPathOverrides 为

“webpack://tt/src/”: “${workspaceFolder}/src/

添加调试选择 chrome

https://i-blog.csdnimg.cn/direct/ea6d1f992331424baca6bfdf77af411a.png

https://i-blog.csdnimg.cn/direct/1767ea84eae84e488d6a71461ec9dc16.png

launch.json

    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                 "webpack://项目名/src/*": "${workspaceFolder}/src/*"
            },
        }
    ]

打上断点

https://i-blog.csdnimg.cn/direct/b0c69810b86d45348ac0fd197ff8452a.png

开启调试

https://i-blog.csdnimg.cn/direct/f47e6bfb578f45bab7f479b816e395f7.png

点击页面按钮可以看到进入调试了

https://i-blog.csdnimg.cn/direct/54ccc0e8980d45a3bf59f5fa20d32c16.png