VSCode Angular 5 Chrome 调试器问题 - 匹配空白？ - 和霍尔特

Question

其中一项更新突然停止工作。我目前正在通过 Chrome 开发人员工具进行调试。

ng serve works well and the app is running perfectly.

但是，我想用 VSCode 再次调试.. 尝试了导致上述相同问题的几种配置。 2.

{
"version": "0.2.0",
"configurations": [

  {
    "name": "ng serve",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200/#",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "webpack:/./*": "${webRoot}/*",
      "webpack:/src/*": "${webRoot}/src/*",
      "webpack:/*": "*",
      "webpack:/./~/*": "${webRoot}/node_modules/*"
    }
  },
  {
    "name": "ng test",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:9876/debug.html",
    "webRoot": "${workspaceFolder}"
  },
  {
    "name": "ng e2e",
    "type": "node",
    "request": "launch",
    "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
    "protocol": "inspector",
    "args": ["${workspaceFolder}/protractor.conf.js"]
  }
]

}

2.

// {
//    // Use IntelliSense to find out which attributes exist for C# debugging
//    // Use hover for the description of the existing attributes
//    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
//    "version": "0.2.0",
//    "configurations": [  
//        {
//            "name": "Launch Chrome with ng serve",
//            "type": "chrome",
//            "request": "launch",
//            "url": "http://localhost:4200",
//            "webRoot": "${workspaceRoot}",
//            "sourceMapPathOverrides": {
//                "webRoot": "${workspaceRoot}",
//                "webpack:/*": "${workspaceRoot}/*"
//            }
//        },
//        {
//            "type": "chrome",
//            "request": "attach",
//            "name": "Attach to Chrome",
//            "port": 9222,
//            "webRoot": "${workspaceFolder}"
//        }

//     ,]
// }
{
  "version": "0.2.0",
  "configurations": [{
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webRoot": "${workspaceRoot}",
        "webpack:/*": "${workspaceRoot}/*"
      }
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

禁用所有扩展，除了 Chrome 的调试器 Visual Studio团队服务

未找到正在使用的端口 4200

netstat -a -n -o

如何更改launch.json并通过VSCode恢复调试能力？

Answer 1

当端口 9222 开始使用时会发生此问题，因为此端口是调试模式的默认端口，因此只需使用另一个任意数字端口作为启动类型，就像我的 launch.json 文件

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",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "port": 4040
        },
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Angular",
          "port": 9222,
           "webRoot": "${workspaceFolder}"
        }
    ]
}

until the time of writing this answer this consider a bug and will be fixed in future releases.

快乐编码

VSCode Angular 5 Chrome 调试器问题 - 匹配空白？ - 和霍尔特

VSCode Angular 5 Chrome debugger issue - matches blank ? - and holts

visual-studio-code

vscode-settings

angular

vscode-debugger