Thanks Robert, after using npm ts-express to generate a default Express TypeScript project, this video helped get my Windows VSCode Debug environment up and running to debug the code. Much appreciated.
Just having the following launch.json works well on my Nestjs app. No need of additional NPM packages. { "version": "0.2.0", "configurations": [{ "name": "Launch via NPM", "request": "launch", "runtimeArgs": [ "run", "start" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "console": "integratedTerminal", "type": "pwa-node" }] }
This was very nice! But I can't get my simple project to work when I followed your steps. Here are my config files: launch.json: { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug TypeScript", "skipFiles": [ "/**" ], "program": "${file}", "cwd": "${workspaceFolder}", "runtimeArgs": [ "-r", "ts-node/register", "-r", "tsconfig-paths/register" ], "outFiles": [ "${workspaceFolder}/**/*.js" ] } ] } tsconfig.json: { "ts-node": { "esm": true, "experimentalSpecifierResolution": "node" }, "compilerOptions": { "esModuleInterop": true, "module": "ESNext", "target": "ESNext", "moduleResolution": "Node" } } But I always got: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for my source .ts file. Do I need to prebuild .js and get the source map first? Could you please share a sample tsconfig.json as well? Thanks for your time!!
This didn't work for me. Wish it did. Pressing Run seems to run without catching any breakpoints, and no variables are loaded. It's as if it's running another file, but I clearly specified my file. I'm on linux. Are you on Windows? I'm using linux filesystem paths, not windows.
Hi Nicole - Windows mainly yes, but it works OK on the Mac too, which has similar file system paths. Are you using absolute paths or ${workspaceFolder}?
Thanks Robert - useful - I'm debugging a nest-js back-end. Is it possible to set up node debugging to allow changes to my back-end code to automatically re-compile and then be available for the next request? Sort-of like hot-reloading for a front-end app.
Thanks Craig, that’s a good question. I’ll have a look into it, there is another method that uses nodemon and the “attach to process” function in VS Code, but I found this unreliable as the debugger did not always attach properly. Maybe there is another way, I’ll experiment and maybe do an updated video
Dear Robert, can I only ask you one question? Seems like it does not stop in breakpoints inside .ts files, but only stops on the breakpoints in .js files... JS code is obviously a little bit different after a compiler has changed the .ts file. What could I do? Thank you very much!
@@RDT Yes I try, but I still confuse, because one config just debug compiled code, another one not working, so i don't know how to debug jest typescript in nest
Can you please how to attach to a process instead of launching a new one ("request": "attach")? it is very helpful because with attaching I would not lose all my bookmarks also I do not have to reload the page and lose the app state. It worked perfectly in Visual Studio but (same concept) and that exists here in vs code as well but we need to figure out how to do that (attach). I tried my self and I checked the documentation and other source but did not work out. Waiting for your help, please. Thank you in advance.
@@RDT Thank you for your response. Here the documentation about attaching to a process (code.visualstudio.com/docs/editor/debugging). Appreciate your help.
Thank you dear Sir Robert! 4 minute video is better than tons of crappy VS documentation 🤦♂🤦♂🤦♂
Omg i can't believe how useless are the docs on this. This video was awesome.
After like 2 days of trying to make TS work , your tutorial did it.
Thank you so so much, I honestly almost gave up, it was so frustrating.
Glad it helped!
This was very helpful. There are a lot of scramble about this simple topic online and this was the most straightforward one.
Thanks for the feedback! Happy to hear it helped you
Exactly what I needed. Most other tutorials seem to be focused solely on debugging web pages. Thank you!
Thanks Robert, after using npm ts-express to generate a default Express TypeScript project, this video helped get my Windows VSCode Debug environment up and running to debug the code. Much appreciated.
Just having the following launch.json works well on my Nestjs app. No need of additional NPM packages.
{
"version": "0.2.0",
"configurations": [{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run",
"start"
],
"runtimeExecutable": "npm",
"skipFiles": [
"/**"
],
"console": "integratedTerminal",
"type": "pwa-node"
}]
}
Thanks, good to know.
This is a very simple but powerful approach, thanks for the tip.
Txs a lot ! Simple but helpful guidance.
This is the only approach that worked for me, thanks a ton 🙏
thanks for the clear and short video , saved me ton of time
Exactly what I was looking for. Thank you!
ty very much. you saved my time
Thanks ! I solved the debug with break points in 5 minutes for NestJS. Before I visited a thousand of links, and it was not working.
You’re most welcome 🙏
Robert, you save me! Thank you!
it works, don't know that we neet to use runtime argument.
That is helpful, you saved me time. Thanks
Thanks but wish you could just also paste the instructions & launch.json file in the description.
can you share your source code repo (git or something )... it is not working for me
Muito bom, rápido e fácil de configurar.
Thanks
Lifesaver
Thank you sir
thx
Thanks! :)
very good, why others say we need sourceMaps: true in launch config?
Awesome 👍
thanks for this video, you saved my life :D
This was very nice! But I can't get my simple project to work when I followed your steps. Here are my config files:
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"skipFiles": [
"/**"
],
"program": "${file}",
"cwd": "${workspaceFolder}",
"runtimeArgs": [ "-r", "ts-node/register", "-r", "tsconfig-paths/register" ],
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
tsconfig.json:
{
"ts-node": {
"esm": true,
"experimentalSpecifierResolution": "node"
},
"compilerOptions": {
"esModuleInterop": true,
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "Node"
}
}
But I always got:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for my source .ts file.
Do I need to prebuild .js and get the source map first? Could you please share a sample tsconfig.json as well?
Thanks for your time!!
Hi, how can I support the channel, most of the amazon items are unavailable.
Thank you so much Jaroslav - we have a Buy Coffee page at www.buymeacoffee.com/robertsdevtalk if you’d like to support us 🙏
Thank you very muchh to save my life bro~
You are very welcome Syamsu, and thanks for your support of the channel 👍
Thanks for sharing
You bet!
this is a quality video. earned a sub!
Thank you 🙏
This didn't work for me. Wish it did. Pressing Run seems to run without catching any breakpoints, and no variables are loaded. It's as if it's running another file, but I clearly specified my file. I'm on linux. Are you on Windows? I'm using linux filesystem paths, not windows.
Hi Nicole - Windows mainly yes, but it works OK on the Mac too, which has similar file system paths. Are you using absolute paths or ${workspaceFolder}?
I have exactly the same issue. Did you find a solution ? thanks
Thanks :)
npm install --save-dev ts-node tsconfig-paths
using tsx for now. this solution doesn't working with me
thanks you very much
I got TypeError: Unknown file extension ".ts"
Thanks Robert - useful - I'm debugging a nest-js back-end. Is it possible to set up node debugging to allow changes to my back-end code to automatically re-compile and then be available for the next request? Sort-of like hot-reloading for a front-end app.
Thanks Craig, that’s a good question. I’ll have a look into it, there is another method that uses nodemon and the “attach to process” function in VS Code, but I found this unreliable as the debugger did not always attach properly. Maybe there is another way, I’ll experiment and maybe do an updated video
Thank you
Dear Robert, can I only ask you one question? Seems like it does not stop in breakpoints inside .ts files, but only stops on the breakpoints in .js files... JS code is obviously a little bit different after a compiler has changed the .ts file. What could I do?
Thank you very much!
Got it. May be i shouldn't have run the "tsc -w main.ts" in a separate terminal. Now seems to work
Thanks a lot. This is going to be super useful 👍
Holy fuck thanks a lot
Thank you, Robert. Great tutorial. Just wondering what theme are you using for your VSCode setup? God bless
I think it's One Monokai theme by Joshua Azemoh
Hello, thanks, can you debug config for jest with example? I have problem with one, thanks so much
Hi Alexsandr, are you using Jest with Nest?
@@RDT Yes I try, but I still confuse, because one config just debug compiled code, another one not working, so i don't know how to debug jest typescript in nest
Its easy to configure... 00:15
Thanks for your comment
Can you please how to attach to a process instead of launching a new one ("request": "attach")? it is very helpful because with attaching I would not lose all my bookmarks also I do not have to reload the page and lose the app state. It worked perfectly in Visual Studio but (same concept) and that exists here in vs code as well but we need to figure out how to do that (attach). I tried my self and I checked the documentation and other source but did not work out. Waiting for your help, please. Thank you in advance.
Thanks for the question Ahmed, have you a link to the documentation you used? I'll take a look as that sounds like a useful thing to be able to do
@@RDT Thank you for your response. Here the documentation about attaching to a process (code.visualstudio.com/docs/editor/debugging). Appreciate your help.
not working at all dude