google-chrome - 使用适用于 Chrome 的 VSCode 扩展调试器同时运行多个项目

标签 google-chrome visual-studio-code google-chrome-devtools vscode-debugger

我有 2 个项目(React 项目),我希望能够在使用 VS Code 时同时进行调试。项目的启动配置如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project A",
      "url": "http://localhost:3003",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project B",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

如果我单独启动任何项目,一切都会正常进行。但是如果我尝试在另一个已经运行时启动一个,我会得到这个:

enter image description here

所以问题是,我应该如何进行设置才能在 VS Code 中调试多个使用 Debugger for Chrome 扩展程序的项目?

最佳答案

我遇到了同样的问题,因为它适用于旧版本的 vscode-debgger。我打开包含这两个项目的文件夹并使用如下配置运行它:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project A and B",
      "url": "http://localhost:3001",
      "urlFilter": "http://localhost:*",
      "pathMapping": {
           "http://localhost:3001": "${workspaceFolder}/projectA",
           "http://localhost:3003": "${workspaceFolder}/projectB"
      }
    }
  ]
}

当 Chrome 启动时,您仍然需要使用 http://localhost:3003 手动打开第二个标签。

关于google-chrome - 使用适用于 Chrome 的 VSCode 扩展调试器同时运行多个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65088851/

相关文章:

c++ - 在 C++ 中编码时无法在 VS Code 中使用 auto 关键字

visual-studio-code - 如何配置 Visual Studio Code 和 tslint?

css - Google Chrome 开发者工具不在 css 旁边显示 css 文件名

javascript - 通过 Chrome 的开发工具编辑资源时,有没有办法监视 keyup 事件?

google-chrome-devtools - 控制台不显示源映射中的事件源

css - 是否可以始终在 Chrome 中为某个网站加载自定义样式表?

javascript - 使用 Chrome 的 datetime-local 自动填充 Date() UTC

ios - 在 IOS 上查看时 Jsfiddle 无法正常运行

html - 如何测试手机chrome的 "save to homescreen"提示

git - VSCode如何添加用于暂存选定行的键盘快捷键