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中创建配置，以便在MacOS上启动Brave浏览器。我附加了"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版本。

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

重新启动浏览器。

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

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

Answer 3

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

此外，请不要忘记在“ URL”字段中指定正确的URL（对于Angular，def db = System.getenv('DB_HOST') url = "jdbc:postgresql://${db}:5432/yurldb"）

...但是...

您还需要使用以下选项启动浏览器：http://localhost:4200

如何在Windows上进行操作：

右键单击Brave快捷方式，然后选择属性，然后在“目标”字段中附加--remote-debugging-port=9222
或在命令提示符下，执行--remote-debugging-port=9222

在macOS上：

在终端中，执行<path to brave>/brave.exe --remote-debugging-port=9222

在Linux上：

在终端中，启动/Applications/Brave Browser.app/Contents/MacOS/Brave Browser --remote-debugging-port=9222

Answer 4

有点晚了，但是... 在this之后得到brave-dev

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

其余设置可以默认设置

Answer 5

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

Answer 7

要遵循的步骤：

开放与代码。
稍等片刻。因为打开 vs 代码需要时间
查看左侧的“搜索”图标。
点击它并输入设置。
看到向下点击打开设置。
浏览器。

"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave

或者试试这个：

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

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

7 个答案:

...但是...