Debug JHipster Frontend with Visual Studio Code - google-chrome

I have installed Debugger for Chrome extension to VS Code. How to bring up JHipster Angular application, which is using webpack in debug mode?
The JHipster Angular is under <application>/src/main/webapp/app and webpack configuration is under <application>/webpack/webpack.dev.js.
Thanks.


Steps to bring up
Open folder or create project at your application root level, NOT <your-app>/src/main/webapp or <your-app>/src/main/webapp/app
Add chrome debugger configuration as below. Ensure port is 9000.
Start JHipster backend: mvnw -P-webpack -Dmaven.test.skip=true
Start JHipster frontend Angular: npm start
Set necessary break point in your Angular project
Start #1 debugger profile (F5 or play button)
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9000",
"webRoot": "${workspaceFolder}"
}
]
}

Related

Vscode Bash Debug not working with workspace config in Linux, but with user config

Bash Debug in VScode not working as it should
I use Bashdb extension for VScode
Environment
Ubuntu 20_04
Vscode 1.56.2
launch.json in code/user
workspace.json in code/Workspaces/1619293380488
Situation
In Run View there is a bash-deb (User) config and I can start it (defined in launch.json). It works
If I start bash-deb(workspace) with same config as launch.json defined in workspace.json I get:
unable to determine workspace folder.
Expected
it should work with (workspace) as well.
Note
python and powershell debug work in both (workspace) and (user) config
in Windows, launch.json does not exist. If I try to call it from F1, launch.json directs to workspace.code-workspace to the configurations area.
Configuration used in both json:
{
"type": "bashdb",
"request": "launch",
"name": "Bash-Debug",
"program": "${file}"
},

Debug Angular-CLI app accross Visual Studio Code not on localhost:4200

All!
How enable debug mode in Visual Studio Code for Angular-CLI application with arbitrary url.
With default ng serve url (localhost:4200) it works fine.
With another url breakpoints are set but not bound.
Here's vscode launch.config
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*":"${workspaceRoot}/*"
},
"url": "http://localhost/CountrySite/v2/",
"webRoot": "${workspaceRoot}"
},
app folder structure
Thanks

The reason was in 401 response for js-sourcemaps returned from web server.
Solved

Coldfusion at VScode localhost refused 8080

I wrote code with Visual Studio Code. When I try to debug my code, Chrome debug doesn't allow the to connection localhost. How to fix the debug settings with launch.json setting?
launch.json code
// 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": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
http://localhost-8080.com/ refused to connection with Chrome

But CF is adobe cold fusion and adobe has no work with this

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.

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}"
}

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

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",

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 :
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)
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.

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

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

Steps to follow:
Open vs code.
wait for sec. bez it take time to open vs code
see left side Search icon.
click on it and type Setting.
see down click on Open setting.
Browser.
"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave
or try this:
.vscode\settings.json:
{
"liveServer.settings.AdvanceCustomBrowserCmdLine": "brave"
}

How do I set up VS Code to debug JS running under asp.net MVC

I'm using the System.Web.Optimization default bundler - running with optimizations disabled locally, and trying to get VS Code debugger hooked into chrome.
VS Code is talking to chrome OK (I can see console output in VS code), but I'm getting breakpoint ignored because target path not found when trying to add a breakpoint
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:54330",
"webRoot": "${workspaceFolder}"
}
Here's a sample line from trace output which reads like the files are being found ok
From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"182","url":"http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js","startLine":0,"startColumn":0,"endLine":41,"endColumn":4,"executionContextId":2,"hash":"F699CE42A4E66A41179BFB42F8FB23B6ABB6F607","executionContextAuxData":{"isDefault":true,"frameId":"(F6D07DAAA333F34A41904700967EB515)"},"isLiveEdit":false,"sourceMapURL":"","hasSourceURL":false,"isModule":false,"length":1244}}
Paths.scriptParsed: resolved http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js to d:\redacted\Scripts\angular\app\components\Product\productIndexController.js. webRoot: d:\redacted
To client: {"seq":0,"type":"event","event":"loadedSource","body":{"reason":"new","source":{"name":"productIndexController.js","path":"http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js","sourceReference":1158}}}
The log when setting a breakpoint:
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"fileExt":".js"}}}
To client: {"seq":0,"type":"response","request_seq":10,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"verified":false,"line":7,"message":"Breakpoint ignored because target path not found","id":1002}]}}
Sample of output from .scripts
› http://localhost:54330/scripts/angular/lib/responsive-bootstrap-toolkit.js (d:\redacted\scripts\angular\lib\responsive-bootstrap-toolkit.js)
› http://localhost:54330/scripts/angular/lib/showdown.js (d:\redacted\scripts\angular\lib\showdown.js)
› http://localhost:54330/scripts/angular/polyfills/blob.js (d:\redacted\scripts\angular\polyfills\blob.js)