Google chrome 如何将VSCode调试器附加到浏览器？

当我在

Chrome

浏览器中打开web应用程序时，我可以将

VSCode

调试器附加到它

调试器配置为：

{
    "name": "Attach to Chrome",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "url": "http://localhost:4200/*",
    "webRoot": "${workspaceFolder}",
},

但是，当我在浏览器中打开web应用程序时，我无法附加

VSCode

调试器

web应用程序是在

http://localhost:4200/users

我在跑步：

Chrome Version 70.0.3538.102 (Build officiel) (64 bits)
Brave Version 0.56.12 Chromium: 70.0.3538.77 (Build officiel) (64 bits)
VSCode Version 1.23.0

在

Lubuntu 16.04

框中

Brave

浏览器是否尚未准备好调试？或者我是否应该取消某些端口限制？我已经为这个web应用程序支付了费用。但是

VSCode

仍然没有附加到它。

有点晚了，但是。。。。 获取以下信息

然后在

launch.json

中添加一个

“runtimeExecutable”：“/usr/bin/brave”

条目，并更改适合您的路径

---

对于那些需要查看完整代码上下文的人，其余的设置可以是默认设置，下面是我完整的launch.json文件。

“配置”

数组中的第二项导致brave的开发浏览器打开以进行调试（）

---

适用于MacOS用户

我能够在

launch.json

中连接并创建配置，以便在MacOS上启动Brave浏览器。我附加了

“userData”：true

属性，因为我遇到了一个错误。我看了这页就明白了

不需要开发版本的Brave

在勇敢的浏览器中，在“下”chrome://settings/privacy，启用“远程调试”选项

重新启动浏览器

如果尚未完成，请将此添加到launch.json文件中（如果路径不同，请调整路径）

---

“runtimeExecutable”：“C:\\Program Files（x86）\\BraveSoftware\\Brave Browser\\Application\\Brave.exe”，

如其他答案中所述，您需要在项目的launch.json文件中添加一个“runtimeExecutable”字段，该字段将指向Brave Browser的可执行文件

... 但是 您还需要使用以下选项启动浏览器：

--远程调试端口=9222

您有两种方法可以做到这一点：

使用该选项启动Brave（Windows：右键单击Brave快捷方式，选择属性，并在“目标”字段中，附加

--远程调试端口=9222

，MacOS/linux:execute

/Brave--远程调试端口=9222

）（提醒：不要忘记重新启动Brave）

根据建议，您只需将以下内容添加到

launch.json

：

“runtimeArgs”：[“--远程调试端口=9222”]

---

第二个选项仅当您有

请求：“启动”

选项，而不是

请求：“附加”

选项时适用，如果您想使用“启动”选项，它将打开另一个窗口，而不是新选项卡。因此，从长远来看，您可能会希望使用第一种方法。

在运行Ubuntu 20.04时使用APT package manager勇敢地安装

将此行添加到为chrome生成的标准launch.json中：

"runtimeExecutable": "/usr/bin/brave-browser"

下面是整个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": "pwa-chrome",
            "request": "launch",
            "name": "Open index.html",
            "file": "/home/my-user/myDirectory/index.html",
            "runtimeExecutable": "/usr/bin/brave-browser"
        }
    ]
}

应采取的步骤：

开放vs代码

等一会儿。bez打开vs代码需要时间

请参见左侧搜索图标

单击它并键入设置

请参见向下单击打开设置

浏览器

或者试试这个：

.vscode\settings.json:
  {
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "brave"
 }

---

在windows上使用正确的brave.exe路径时，这似乎不起作用。普通的brave和适用于我的dev versionWorks（Windows 10）也存在同样的问题。您需要使用以下选项启动brave:

--远程调试端口=9222

（请参阅我的答案）我找不到这样的“远程调试”选项-可能这只在Brave的开发版本中可用？你找不到它，因为他们在2020年8月删除了它。re:这个远程调试端口选项可以通过launch.json中的“runtimeArgs”添加吗？好吧，它确实有效！我已经编辑了我的消息，但是有一个问题：它只适用于

请求：“launch”

。对于

请求：“attach”

您仍然需要单独启动该选项

{
    // 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": "pwa-chrome",
            "request": "launch",
            "name": "Open index.html",
            "file": "/home/my-user/myDirectory/index.html",
            "runtimeExecutable": "/usr/bin/brave-browser"
        }
    ]
}

"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave

.vscode\settings.json:
  {
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "brave"
 }