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

Question

在Chrome浏览器中打开Web应用程序时，可以将VSCode调试器附加到该应用程序。

调试器配置为：

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

但是，当我在Brave浏览器中打开Web应用程序时，无法附加VSCode调试器。

Web应用程序是Angular在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仍然没有依附。

Answer 1

对于 MacOS 用户

我能够连接以创建配置，launch.json以便 Brave 浏览器在 MacOS 上启动。我附加了该"userData": true属性，因为我遇到了错误。我通过查看此页面发现了这一点。https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

{
    "type": "chrome",
    "request": "launch",
    "name": "Brave",
    "runtimeExecutable": "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
    "userDataDir": true,
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}

Answer 2

有点晚了但是....继续brave-dev关注这个

然后添加到您launch.json的"runtimeExecutable": "/usr/bin/brave"条目并更改适合您的路径。

其余设置可以是默认值

Answer 3

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

... 但 ...

您还需要使用以下选项启动浏览器：--remote-debugging-port=9222

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

1. 使用选项启动 Brave（Windows：右键单击 Brave 快捷方式，然后选择属性，然后在“目标”字段中追加，--remote-debugging-port=9222MacOS / linux：执行<path to brave>/brave --remote-debugging-port=9222）（提醒：不要忘记重新启动 Brave）
2. 根据Cornelius 的建议，您只需将以下内容添加到您的launch.json：

"runtimeArgs": [ "--remote-debugging-port=9222" ]

第二个选项仅适用于您有该request: "launch"选项而不是第request: "attach"一个选项，并且如果您想使用“lauch”选项，它将打开另一个 Brave 窗口，而不是新选项卡。因此，从长远来看，您可能会希望使用第一种方法。

Answer 4

Brave 的 DEV 版本不是必需的。

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

重新启动浏览器。

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

"runtimeExecutable": "C:\\Program Files (x86)\\BraveSoftware\\Brave-Browser\\Application\\brave.exe",