一、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