Debugging Javascript in VSCode on Mac - javascript

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.

Related

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?

need to open debug and shows page to localhost:8080

I need to open browser in debug and he link where the google chrome need to open is
localhost:8080
In my luch.json I have:
{
// 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": [
{
"url":"http://localhost:8080",
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.html",
"file": "c:\\Users\\franc\\Desktop\\Angular js\\Progetti\\Modulo 4 routing\\codice mio\\index.html",
}
]
}
the problem is the google chrome debug is to this link:
file:///C:/Users/franc/Desktop/Angular%20js/Progetti/Modulo%203%20Controlli/Codice%20mio/index.html/orders
and nothing is loaded. Anyone can help me to open debug console with visual studio code in loalhost:8080 and it loads data?
Add this to your configurations,
"version": "0.2.0",
"configurations": [
{
"name": "Debug in Chrome",
"type": "chrome",
"request": "launch",
"port": 9229,
"webRoot": "${workspaceRoot}/src",
"runtimeArgs": [
"debug:start"
],
"resolveSourceMapLocations": [
"${webRoot}/**",
"!**/node_modules/**"
]
}
]
Run chrome.exe --remote-debugging-port=9229 from your terminal/cmd.
workspaceRoot specifies the workspace absolute path to the webserver root. used to resolve paths like /app.js to files on disk. Shorthand for a pathMapping for "/".

Attaching grunt to VSCODE debugger

I am trying to attach my default grunt tasks to vscode debugger. So my desired workflow is I start the debugger and it runs the default grunt tasks and then I am able to put breakpoints in my code using vscode debugger. My launch JSON file looks like this.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/node_modules/grunt/lib/grunt",
"args": ["run"],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "production"
}
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
But I am getting an error can't launch program 'node_modules/grunt/lib/grunt'; setting the 'outfiles' attribute might help
If you want to debug your compiled code, you have to define the build task in tasks.json and then specify it as a preLaunchTask in your launch.json configuration.
Also remember to augment your build config so it outputs source maps. With source maps, it is possible to single step through or set breakpoints in the original source.
You need to configure the tasks in a tasks.json file (located under your workspace .vscode folder). If you don't already have a tasks.json file, running the Tasks: Configure Task Runner action from the Command Palette (⇧+⌘+P on macOS or F1 on Windows/Linux) will offer you a set of templates to pick from. Select Grunt from the list and it will generate a file that should look like this:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "grunt",
"isShellCommand": true,
"args": ["--no-color"],
"showOutput": "always"
}
now you can define your build task:
{
...
"showOutput": "always",
"tasks": [
{
"taskName": "build",
"args": [],
"isBuildCommand": true
}
]
Assuming that your Grunt builds your app from src/app.js to dist, you can define your launch configuration like this:
{
"type": "node",
"request": "launch",
"name": "Launch",
"program": "${workspaceRoot}/src/app.js",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/**/*.js"],
"preLaunchTask": "build"
}
You can read more in the VS Code documentation - Node.js Debugging in VS Code.

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

Categories