vscode断点调试chrome

vscode配置chrome调试。
在vscode断点调试chrome报错提示：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://自己ip:自己项目端口/",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

看了好多博客最后还是这两个链接最有效。其中vue官网给的通俗易懂。
参考：链接1vue官网；链接2vscode编辑器网站；链接3他人博客

https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
https://segmentfault.com/a/1190000013392459