We Keep Coding

Map a local file to a remote URL for debugging

I have written a CLI app that helps me to deploy code from code.html to a specified URL address by clicking F5 (it's configured in launch.json thorugh Powershell extension)
That command deploys my code, then opens a Chromium instance with the target page on which the code starts to run.
I want to debug this code (it's simply JavaScript embedded in HTML) in my local code.html file (setting breakpoints etc).
To do that, I have configured the described task as a prelaunchTask and then added a configuration that attaches a debugger to my running Chromium when it's ready (See below).
Everything is super cool, the browser attaches fine, but I simply can't map my local code.html to a code file(s) automatically generated at the specified URL location, because my code is not running in the same page I wrote in, but it's embedded into a remote page, which is autogenerated, i.e. I only know the URL address where it runs.
Is there a way to map the code.html file to a remote URL, so I could debug that code while running?
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 1234,
"urlFilter": "https://somewebsite.com*",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "deployment"
}
],
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "deployment",
"type": "shell",
"command": "C:\\Something.exe",
"args": [ someargs ]
}
]
}

I can't run Chrome Debugger in VS Code on Linux Mint

Hi I've got a problem to run Chrome Debugger directly in VS Code. I'm working on Linux Mint. This is how my launch.json file looks like:
{
// 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": "Launch Chrome against localhost",
"file": "${workspaceFolder}/index.html"
}
]
}
Now i try to run debugger and error message says: Unable to launch browser: "Unable to find Chrome version stable. Available auto-discovered versions are: ["dev"]. You can set the "runtimeExecutable" in your launch.json to one of these, or provide an absolute path to the browser executable."
Following the sugesstion I've added runtimeExecutable to chrome executable like this:
runtimeExecutable:"/opt/google/chrome/google-chrome" and now error message says:
Unable to Attach to the browser.
Google Chrome is installed on my machine version: 83.0.4103.116-1.
Thanks for help in advance
Error
Current Config

I'm also using Chromium on Linux Mint.
I solved the problem with
debug.javascript.usePreview: false in VS settings,
as explained in This answer

You need to add the webroot property too try this
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
},

VSC Debuging React, cannot create breakpoints / attach to process

I've been trying out a lot of the potential fixes from so, but none of them helped me so far.
I cannot get the debugger to attach properly, it does attach, but it doesn't give me breakpoints (breakpoint set but not yet bound).
What I've done so far :
I created the entry in launch.json
{
"type": "node",
"request": "launch",
"name": "Launch debug client",
"sourceMaps": true,
"runtimeExecutable": "node",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
],
"cwd": "${workspaceFolder}/client/"
}
That resulted in this error.
Is the second --inspect-brk=PORT the one that I should strive to attach to? The second PORT is always random, how would I get the debugger to attach to that? It also seems like webpack-dev-server doesn't care about inspect-brk because the client launches and works ...
I'm also not sure if I got webpack-dev-server to build source maps - are they saved in memory?
I did try to set a fixed port, remap sourceMapPathOverrides, set outFiles and setting the program path to no avail. Prior to writing this I did not even see that it tried to generate it's own new port ...

If anyone stumbles upon this: Webpack-dev-server is already launched in debugger mode, and the only way to currently attach to that process (as far as I could find) is through the browser.
You will need to install a debugger extension for vsc for the browser that you are using (currently only available for chrome and firefox). Then you can just attach / launch to the url that webpack-dev-server is starting on and vscode will hook into that instance.
Example
launch.json
{
"type": "firefox",
"name": "firefox debug",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client"
}

Visual Studio Code: How to debug javascript code inside a Spring Boot application?

I am developing a Spring Boot application using Java 12 and Maven.
I can debug the Java code without any problems.
However, I was not able to configure the debugger to also be able to debug the javascript code in the front-end side of the application.
How can I do it?
This is my launch.json file:
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8888",
"webRoot": "${workspaceFolder}/src/main/java/resources/static"
},
{
"type": "java",
"name": "CodeLens (Launch) - WexManagerApplication",
"request": "launch",
"mainClass": "wexmanager/br.com.aquario.wexmanager.WexManagerApplication",
"projectName": "wexmanager"
}
]
}
I am trying to run two debuggers at the same time: One for the back-end and one for the front-end, but it doesn't seem to work.

Use a serverReadyAction under your Java launch configuration.
{
"type": "java",
"name": "Launch Dev AppServer",
"request": "launch",
"mainClass": "AppServer",
"projectName": "App",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Started SelectChannelConnector#[0-9]+.[0-9]+.[0-9]+.[0-9]+:([0-9]+)",
"webRoot": "${workspaceFolder}/src/main/resources"
}
}
action specifies the debug environment to use, pattern is a regular expression that will match the console output when the server is ready to accept connections (the port number that the server is listening on should be captured), and webRoot needs to point to the root JavaScript source file location.
This configuration is sufficient if you deploy unprocessed JavaScript but if you use a bundler like webpack you'll also need to create source maps and set the outFiles property appropriately.
Full documentation on configuring the ServerReadyAction JavaScript debug environment here: https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md

how to debug AngularJs and NodeJs code in Visual Studio Code

i need some help from you guys i am new in AngularJs,i want debug my code in Visual Studio code how do this please help me, i was installed Debugger for Chrome but its shows
breakpoints ignored because generated code not found
when i switch option Attach to Chrome, with sourcemaps Application does not start its show belo error,
Cannot connect to runtime process, timeout after 10000 ms - (reason:
Cannot connect to the target: undefined).
when i select Launch Chrome against localhost, with sourcemaps option my application run perfectly but debugger does not run
how to solve this type of problem,
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"url": "http://localhost:8080",
"port":8080,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}