CODEWITHSUNDEEP
google-chromevisual-studio-codevscode-debuggerbrave
Stephane
Stephane

Reputation: 12810

How to attach the VSCode debugger to the Brave browser?

When I open my web application in the Chrome browser I can attach the VSCode debugger to it.

The debugger configuration is:

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

But when I open the web application in the Brave browser I cannot attach the VSCode debugger.

The web application is an Angular one opened at http://localhost:4200/users

I'm running:

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

on a Lubuntu 16.04 box.

Is the Brave browser not yet ready for debugging ? Or is there some port restriction I should remove ? I have put the shiled down for this web application. But VSCode still does not attach to it.

Upvotes: 50

Views: 29177

Answers (8)

skyslide22
skyslide22

Reputation: 41

For dotnet/c# debugging in vscode you need to remove one property in project/project/properties/launchSettings.json

  "https": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,

    // remove inspectUri
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

    "applicationUrl": "https://0.0.0.0:7045;http://0.0.0.0:5107",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  }
}

else vscode/c#devkit will complain about edge/chrome not found and so on

works for a dotnet 8 dotnet new blazor -int webassembly -n testapp app

Upvotes: 0

Bhojak Rahul
Bhojak Rahul

Reputation: 31

Steps to follow:

  1. Open vs code.
  2. wait for sec. bez it take time to open vs code
  3. see left side Search icon.
  4. click on it and type Setting.
  5. see down click on Open setting.
  6. Browser.

check this one

"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave

or try this:

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

Upvotes: 2

Chart96
Chart96

Reputation: 480

Brave install with APT package manager on Running Ubuntu 20.04

Add this line to the standard launch.json generated for chrome:

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

Here is how the whole launch.json looks. If you want to copy this just make sure file points to the right location.

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

Upvotes: 5

John
John

Reputation: 436

As mentioned in the other answers, you need to add a "runtimeExecutable" field in the launch.json file of your project that will point to the executable of Brave Browser.

... but ...

You also need to launch the browser with the following option : --remote-debugging-port=9222

You have 2 ways to do it :

  1. Launching Brave with the option (Windows : Right click the Brave shortcut, and select properties, and in the "target" field, append --remote-debugging-port=9222, MacOS / linux : execute <path to brave>/brave --remote-debugging-port=9222) (reminder : don't forget to relaunch Brave)
  2. Following Cornelius suggestion, you can simply add the following to your launch.json :
"runtimeArgs": [ "--remote-debugging-port=9222" ]

This second option applies ONLY if you have the request: "launch" option, not the request: "attach" one, and if you want to use the "lauch" option, it will open another Brave window, not a new tab. So you'll probably want to use the first method in the long run.

Upvotes: 12

villaa19
villaa19

Reputation: 679

For MacOS users

I was able to connect to create a configuration in launch.json so that the Brave browser launches on MacOS. I appended the "userData": true property because I was getting an error. I figured that out by looking at this page. 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}"
}

Upvotes: 46

Nadge25
Nadge25

Reputation: 327

The DEV version of Brave is not necessary.

In your Brave browser, under "chrome://settings/privacy", enable the "Remote debugging" option.

Restart your browser.

If not done yet, add to your launch.json file this (adjust your path if it is not the same)

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

Upvotes: 12

Jmaurier
Jmaurier

Reputation: 857

For those that need to see full code context, here is my complete launch.json file. The second item in the "configurations" array causes brave's dev browser to open for debugging (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}"
        }
    ]
}

Upvotes: 6

Eduardo Portal Geroy
Eduardo Portal Geroy

Reputation: 374

A little late but.... get brave-dev following this

then add to your launch.json a "runtimeExecutable": "/usr/bin/brave" entry and change the path that suits you.

rest of the settings can be default

Upvotes: 20

Related Questions