We Keep Coding

Why does Skipfiles not skip files on external api's?

I am trying to debug the code. Debugging my own code, which runs in Chrome, is possible. My code makes use of an external API and unfortunately i can not prevent my Debugger from stepping into the API's code.
My debugger always steps from my main.js to the Viewer3D.js file which is located at developer.api.autodesk.com/**/*.js. Then my callStack gets so big, that debugging is impossible.
I added
"developer.api.autodesk.com/**/*.js"
to my launch.json but it still doesn't work. I always get into this file.
This is how my launch.json 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": [
{
"name": "Clientseitiges Debuggen",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}/wwwroot",
"skipFiles": ["<node_internals>/**",
"developer.api.autodesk.com/**/*.js"],
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
},
{
"name": "debug meinen viewer",
"port": 9229,
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "node"
},
{
"type": "node",
"request": "launch",
"name": "Launch meinen Viewer",
"runtimeExecutable": "npm",
"runtimeArgs": ["start"],
"envFile": "${workspaceFolder}/.env",
"skipFiles": ["<node_internals>/**/*.js"]
}
]
}

Not setting breakpoints in hashed file

I want to debug code in the browser, which is built with Vite. For this I created following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "attach",
"name": "Debug with Brave",
"urlFilter": "localhost:8337",
"webRoot": "${workspaceFolder}/src",
"runtimeExecutable": "/usr/bin/brave-browser",
"port": 9222,
"sourceMapPathOverrides": {
"localhost:8337/*": "${workspaceFolder}/src/*",
},
}
]
}
When I am setting a breakpoint in main.js the breakpoint gets set in main.js?t=1661405061806. When hitting the breakpoint the hashed/timestamped file gets opened and I can't directly edit it. I thought about adding a RegEx to the sourceMapPathOverrides but that gives an error.
How can I prevent VS Code from opening the hashed/timestamped file and instead use the "real" file?

How to debug JavaScript in VSCode on a Flask project?

I have a similar question to this unanswered one. I am not yet allowed to comment on said question.
Is it possible, and if so, how can I debug the JS components of my Flask app from within VSCode?
I have the following debug configuration:
"version": "0.2.0",
"configurations": [
{
"name": "Python: Flask - Dev",
"type": "python",
"request": "launch",
"module": "flask",
"env": {
"PIPENV_VENV_IN_PROJECT":"1",
"FLASK_APP":"run.py",
"FLASK_ENV":"development",
"FLASK_DEBUG":"1",
"TEMPLATES_AUTO_RELOAD" : "1"
},
"args": [
"run"
],
"jinja": true
},
{
"name": "Python: Flask - initDB",
"type": "python",
"request": "launch",
"module": "flask",
"env": {
"PIPENV_VENV_IN_PROJECT": "1",
"FLASK_APP": "run.py",
"FLASK_ENV": "development",
"FLASK_DEBUG": "1",
},
"args": [
"run",
"--no-reload" // Use for initial dev DB deploy
],
"jinja": true
}
]
From what I gather, it is possible to use the remote debugging feature of Firefox Developer Edition with its own configurations as per here.
Any ideas on how to combine these configurations? Or perhaps another solution to the problem altogether?

I know this is late, but I thought I'd leave this here for others.
For me it was a matter of setting the "webRoot" property correctly.
Here is my configuration
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5001/",
"webRoot": "${workspaceFolder}/wserver",
}
"webRoot" should point to the root directory that the server loads. Open the page/app you are trying to debug and look in the Sources tab in developer tools to see the root web directory.
Given the tree in the Sources tab looks like the following; "webRoot" should point to the local parent directory of (in my case) the static folder. In my case "wserver"
Local directory path:
FlaskApp/wserver/static/scripts/myscript.js
DevTools Sources tree:
> localhost:5001
> static
> scripts
> myscript.js
As of the latest version of vscode you don't need to install any extra extensions.

Debugging Javascript in VSCode on Mac

I use VSCode for my main editor, but when I debug plain native javascript I have always done it in the browser. Reason? Because I can't get the debugger to work.
Is this possible with native javascript?
I have tried the chrome debugger extension, but that always times out.
I simply have a single line of code in my javascript file
document.write("Hello World!");
I would really like to use the debugger in vscode, but I am not having much luck.
Node version is set to v8.1.2
This is my launch.json config:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"cwd": "${workspaceRoot}",
"outFiles": ["${workspaceRoot}]/*.js"]
}
]
}
What else do I have to do?

I was able to do the same on Ubuntu and it should work on Mac too, using following configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"userDataDir": "${workspaceRoot}"
}
]
}
Obviously my html file is named index.html and resides in workspace root.

How do I setup VS Code for Angular Debugging?

I'm trying to setup Visual Studio Code for debugging Angular. If I just use the out-of-the-box version of launch.json and point it to the /js/app.js file, it returns:
ReferenceError: angular is not defined
So, I tried to use gulp-connect to start a server. This starts the app just fine, but the debugger isn't attached and it never stops at breakpoints.
Can someone show me how to debug an angular web with VS Code?
PS. Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Debug with gulp.js",
"type": "node",
"request": "launch",
"program": "js/app.js",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}

Okay, with the help of the #code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...
First, you need to download the "Debugger for Chrome Extension." You do this by typing this:
F1
ext Install Extensions
debug (then select Debugger For Chrome)
Once that is installed, I used MSFT's instructions found here:
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:
{
"version": "0.2.0",
"configurations": [
{
// Use this to get debug version of Chrome running:
// /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "./www"
}
]
}
Also, don't forget to start Chrome in debug mode with this (for Mac):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222