如何将 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 浏览器还没有准备好进行调试吗？或者我应该删除一些端口限制吗？我已经为这个网络应用程序放下了盾牌。但是 VSCode 仍然没有附加到它。

Answer 1

有点晚了但是...... 获得 brave-dev 关注 this

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

其余设置可以默认

Answer 2

对于那些需要查看完整代码上下文的人，这是我的完整 launch.json 文件。 "configurations" 数组中的第二项导致 brave 的开发浏览器打开进行调试 (you can download the Brave dev browser here)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Brave",
            "runtimeExecutable": "C:/Program Files (x86)/BraveSoftware/Brave-Browser-Dev/Application/brave.exe",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Answer 3

对于 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 4

不需要 Brave 的 DEV 版本。

在您的 Brave 浏览器中，在 "chrome://settings/privacy" 下启用 "Remote debugging" 选项。

重新启动浏览器。

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

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

Answer 5

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

...但是...

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

您有 2 种方法可以做到：

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

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

第二个选项仅适用于 request: "launch" 选项，而不是 request: "attach" 选项，如果您想使用“lauch”选项，它将打开另一个 Brave window，不是新标签。因此，您可能希望在长运行.

中使用第一种方法

Answer 6

Brave 在运行 Ubuntu 20.04

上使用 APT 包管理器安装

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

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

这是整个 launch.json 的样子。如果您想复制它，请确保 file 指向正确的位置。

{
    // 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"
        }
    ]
}

Answer 7

要遵循的步骤：

打开 vs 代码。
等一下。因为打开 vs 代码需要时间
请参阅左侧的“搜索”图标。
点击它并输入设置。
往下看点击打开设置。
浏览器。

"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave

或者试试这个：

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

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

How to attach the VSCode debugger to the Brave browser?

google-chrome

visual-studio-code

brave

vscode-debugger

...但是...