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

Posted 2023-02-15

【中文标题】如何将 VSCode 调试器附加到 Brave 浏览器？

【英文标题】：How to attach the VSCode debugger to the Brave browser?

【发布时间】：2019-04-22 03:13:10

【问题描述】：

当我在Chrome 浏览器中打开我的网络应用程序时，我可以将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 仍然没有附加到它。

【参考方案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"

【参考方案2】：

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

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

其余设置可以默认

【讨论】：

当使用正确的路径到brave.exe 时，这在Windows 上似乎不起作用。普通勇敢者和开发者版本是同样的问题

为我工作（Windows 10）

您需要使用以下选项启动 Brave：--remote-debugging-port=9222（请参阅我的回答）

【参考方案3】：

无需 DEV 版的 Brave。

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

重新启动浏览器。

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

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

【讨论】：

我找不到这样的“远程调试”选项 - 也许这仅在 Brave 的开发版本中可用？

您找不到它，因为他们在 2020 年 8 月将其删除 re:github.com/brave/brave-browser/issues/9715

【参考方案4】：

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

...但是...

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

你有两种方法：

使用选项启动 Brave（Windows：右键单击 Brave 快捷方式，然后选择属性，并在“目标”字段中，附加 --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”选项，它将打开另一个勇敢的窗口，而不是新标签。因此，从长远来看，您可能希望使用第一种方法。

【讨论】：

这个远程调试端口选项可以通过launch.json中的“runtimeArgs”添加吗？

嗯，它确实有效！我已经编辑了我的消息，但是有一个问题：它仅适用于 request: "launch"。对于request: "attach"，您仍然需要单独启动 Brave 选项

【参考方案5】：

对于那些需要查看完整代码上下文的人，这里是我完整的 launch.json 文件。 "configurations" 数组中的第二项导致勇敢的开发浏览器打开进行调试 (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"
        
    ]

【参考方案6】：

在运行 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"
        
    ]

【参考方案7】：

要遵循的步骤：

打开 vs 代码。 请稍等。因为打开 vs 代码需要时间 见左侧搜索图标。 点击它并输入设置。 向下点击打开设置。 浏览器。

"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave

或者试试这个：

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