vs code 調試設置

1.  首先vs code 安裝插件：Debugger for Chrome
2. vscode 設置：點擊調試按鈕，然后調試面板界面再點擊設置按鈕，添加一個配置，選擇環境為：chrome
   編輯器自動生成一個launch.json 文件，

 

 

使用下面內容替換自動生成的內容

 

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "使用本機 Chrome 調試",
            "type": "chrome",
            "request": "launch",
             //"file": "${workspaceRoot}/index.html",
             "url": "http://localhost:9527", //使用外部服務器時,請注釋掉 file, 改用 url, 並將 useBuildInServer 設置為 false 
            "runtimeExecutable": "C:\\Users\\chenjingping\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:9527",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
              }
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "timeout":20000,
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
       
    ]
}

 

優先使用第一個進行調試，第二個配置只能調試vue里的js,不能調試到js文件的代碼，暫時沒搞明白什么情況