vscode的断点调试如何以attach方式调试

一、launch方式

这个方式有很多，很多文章已经写得很清楚了；

https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

https://juejin.cn/post/7071219293249077256

 

二、attach方式

首先在终端中以这段代码启动调试模式下的浏览器，并且浏览器会监听9222端口；

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

然后在vscode的launch.json中如此配置：

{

    "version": "0.2.0",
    "configurations": [
      
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "webRoot": "${workspaceRoot}/src",
          "url": "http://localhost:8082/#/",　
          "sourceMaps": true,
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        }
      
      
        // {
        //     "type": "chrome",
        //     "request": "launch",
        //     "name": "vuejs: chrome",
        //     "url": "http://localhost:8082",
        //     "webRoot": "${workspaceFolder}/src",
        //     "breakOnLoad": true,
        //     "sourceMapPathOverrides": {
        //       "webpack:///src/*": "${webRoot}/*"
        //     }
        //   },
        
    ]
}

第三：在新打开的浏览器中，输入localhost：8082，然后vscode就会找到目标url并attach到chrome了；

最后：后续断开后还想重新练，需要重新输入url让vscode找到；

 

文章中大佬说，lanuch其实就是比attach帮助我们开了一个8082的网页；而attach是关联到已有的网页；

 

https://segmentfault.com/a/1190000013392459

https://juejin.cn/post/6844903905684357127