typescript - 在 Visual Studio Code 使用 Chrome 調試器擴展時出現「未驗證的斷點」

我正在嘗試在 Visual Studio Code 中使用 Chrome 調試器擴展來調試我的 Typescript 代碼，但在我的斷點上收到“未驗證斷點”的訊息，並且執行不會在我的斷點處停止。

這是我的 launch.json 檔案：

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

應用程式版本：

Visual Studio Code: 1.25.1
Chrome：67.0.3396.99

有其他建議我該如何解決這個問題嗎？

答案＃1

我終於找出問題所在了：

當我閱讀「${workspaceFolder}」的定義時，它說明如下：

在 VS Code 中打開的資料夾路徑

我的錯誤：

我在 Windows 中的專案路徑如下：C:\Users\myusername\Documents\VSCode\Source\ProjectName

透過 Visual Studio Code，我打開了 Source 資料夾，並且總是需要在 整合終端機 中執行更改目錄 (cd ProjectName) 命令到 'ProjectName'。這導致 .vscode 資料夾和 launch.json 檔案 被建立在 Source 資料夾，而不是 ProjectName 資料夾。

上述錯誤導致 $ {workspaceFolder} 指向了 Source 資料夾，而該資料夾中沒有任何 Angular 元件，而不是指向 ProjectName 資料夾。

修復方法：

在 Visual Studio Code 中，打開資料夾：C:\Users\myusername\Documents\VSCode\Source\ProjectName，並在該目錄中設定我的 launch.json。

答案＃2

另一個針對 @angular/cli 9.1.7 的更新 28/05/2020...

這是我目前為 @angular/cli 9.1.7 設定的工作配置。移除 sourceMapPathOverrides

    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

{
  // 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": "Launch Chrome against localhost",
    "url": "http://localhost:21460",
    "webRoot": "${workspaceFolder}"
  }]
}

我對「未驗證斷點」問題的解決方案。

環境

Angular CLI 8.1.1
Visual Studio Code 1.36.1
Chrome 擴充功能偵錯器 4.11.6

在 VSC 中透過「新增設定」選項所建立的預設 .vscode/launch.json 看起來會類似這樣（我已將埠從 8080 改為 4200）。

{
  // 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": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

添加以下項目解決了我遇到的「未驗證斷點」問題。

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

完整且可運作的 .vscode/launch.json：

{
  // 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": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

還有一些可以添加的額外項目：

 "breakOnLoad": true,
 "sourceMaps": true,

然而，在我的情況下，我並不需要這些來解決問題。

{
  // 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": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

答案＃3

上面的答案可能會解決很多問題，但它沒有解決我的問題。我的問題要簡單得多，但也更煩人……

launch.json 文件中的配置設定是區分大小寫的。

我的「webRoot」條目拼寫是正確的，但我其中一個單詞用了大寫 B，而不是小寫 b。

例如：

"webRoot": "${workspaceFolder}/My.Folder"

不會匹配您工作區中名稱為：的資料夾

我的.f資料夾

我希望這能幫助到外面的人。

答案＃4

有很多正確的答案。在我這個案例中，所有這些答案的組合都有幫助，而且我花了很長時間才弄明白。我希望我可以用這個幫你節省一些頭痛的時間，所以

讓我參考上面的答案，一步步總結對我有幫助的部分：

從正確的資料夾啟動 VS Code 很重要（參見 CodeChimp 和 monstertjie_za 的回答）。
打開一個控制台視窗，並使用 cd 進入專案資料夾。
範例：
cd myProject
code .
確保你正在正確的 .vscode 資料夾中配置檔案。
正確的 .vscode 資料夾是你的專案資料夾的子目錄。
注意： 如果你已經錯誤地在子資料夾層級過深的位置打開了 VS Code，例如在 src 資料夾中，那麼你會在那裡找到一個 .vscode 資料夾（就像我的情況一樣），其中包含對除錯無用的配置檔案。
在 .vscode\launch.json 檔案中設置調試配置。
確保你已經為你的應用程式指定了正確的端口，在我的情況下 端口 4200 運作良好。
同時確保 "webRoot" 參數已正確配置（參見 Stig Perez 的回答）。在我的情況下，有必要在它後面加上一個子資料夾。要找出由變數 $(workspaceFolder) 指定的路徑，請查看我在 StackOverflow 上提出的問題，關於如何顯示 VS code 變數值。
注意：如果尚未有此配置，請按以下步驟新增：前往除錯擴充功能（即點擊側邊欄）。在除錯工具的下拉選單中，選擇「新增配置……」，然後按下藍色的「新增配置」按鈕。選擇「啟動 Chrome」作為要新增的配置。
範例配置（launch.json）：
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
將 projectsubfolder 替換為您專案中可能有的子資料夾。請注意，大小寫是區分的（參見 Michael Walsh 的回答）。
現在在你的應用程式中設置斷點。
要使用除錯器啟動您的應用程式，請在 VS Code 中打開終端視窗，輸入
cd projectsubfolder
npm install & ng serve
這會確保在編譯您的應用程式之前，先解決並下載所依賴的套件。請等待編譯完成。
然後，點擊 VS 除錯器中的綠色三角形，它會啟動一個附加了除錯器的 Chrome 視窗。
注意： 您不需要每次都執行 npm install，只有當套件/依賴項有變更時才需要。大多數情況下，執行 ng serve 就足夠重新編譯並運行您的程式碼。

答案＃5

在我的情況下，我必須這樣定義 sourceMapPathOverrides 的值：

檔案 launch.json（位於 .vscode 資料夾內）：

{
  // 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": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

我的來源位於 $ {workspaceFolder}/project/app。