I am learning typescript and try to get also the debugging working as well.
I am using Visual Studio Code version 1.14.1
Typescript version 2.4.1
NodeJs version 8.1.4
Here is the repository with the code https://github.com/sherry-ummen/tryingouttypescriptdebugging
tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-w", "-p", "."],
"showOutput": "silent",
"isBackground": true,
"problemMatcher": "$tsc-watch"
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/Test.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/out/*.js"]
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"outDir": "out/",
"sourceMap": true
},
"files": [
"IShape.ts",
"Circle.ts",
"Triangle.ts",
"Test.ts"
]
}
So the compilation is working fine atleast does not give error. But when I press F5 on visual studio code to run it then I get the following error
Could someone please guide me on how to get this working with visual studio code ?
Ok I figured it out with the help of the comments I got and also tweaking my tsconfig.json file.
I wrote a blog post about it on how to get started with the debugging if someone bumps up with the same issue then they can refer this post https://sherryummen.in/2017/07/14/debugging-multiple-typescript-files-using-vscode/
Related
I am trying to debug nodejs code using Launch.json attach to process. I have tried following configuration
but debugger is not getting connected. my application is running on Node v6.11.5
Launch.json :--
{
"type": "node",
"name": "Attach by Process ID",
"request": "attach",
"processId": "${command:PickProcess}",
"skipFiles": [
"<node_internals>/**"
],
}
,Error getting displayed:
If you are using gulp you can use a configuration like this to launch the gulp task from VSCode using the Run->Start Debugging F5 command and debug it directly.
{
"version": "0.2.0",
"configurations": [
{
"name": "MyGulpTask",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"console": "internalConsole",
}
]
}
I want to use Visual Studio for developing an Node.js application with Typescript and simply want the normal debug behavior of any modern IDE: Debug code, set breakpoints, look into vars etc. Following the official documentation guide, I get an error when running the task: The npm task typescript didn't contribute a task for the following configuration.
So instead I invoke a custom npm script in the tasks.json file:
launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"preLaunchTask": "typescript"
}
]
task.json
"tasks": [
{
"type": "shell",
"label": "typescript",
"command": "cd server; npm run build:live"
},
]
package.json
"scripts": {
"build:live": "nodemon --inspect --exec ./node_modules/.bin/ts-node -- ./index.ts"
}
Now the app is comping and starting (also with live reloading) fine. But NO debugging works, no breakpoint was reached. Is it really that hard to debug Typescript in VS Code?
I'm using the latest
Live debugging seems to be a pain on Typescript in VS Code. I could only make regular debugging working in a similar way to the full Visual Studio:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.ts",
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"sourceMaps": true,
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"internalConsoleOptions": "openOnFirstSessionStart",
"preLaunchTask": "compile",
"name": "DEBUG"
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "compile",
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Please note that you've to set "sourceMap": "true" in tsconfig.json. When not, an error occurs that corresponding source maps aren't found. This is cause NodeJS isn't able to compile TS. Compiling is done by the TypeScript compiler tscbefore. For debugging purpose (e.g. reach breakpoints) the source maps can map the compiled js to the ts source file here.
I am setting up a typescript project with node.
I can debug my main.ts file in vs code with this launch.json configuration:
{
"type": "node",
"request": "launch",
"name": "Lancer le programme",
"program": "${workspaceRoot}/src/main.ts",
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
]
}
This works fine but there is no auto restart when I edit main.ts
To implement auto restart, I launch in my project directory tsc --watch, and then this lauch configuration:
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"runtimeArgs": [
"--debug=5858"
],
"program": "${workspaceRoot}/src/main.ts",
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"restart": true,
"port": 5858,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"sourceMaps": true
},
The above configuration does autorestart when I edit source files, but the vscode debugger doesn't break anymore...
Has anyone achieved : debugging typscript in vscode with autorestart ?
This is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
"program": "${workspaceFolder}/build/index.js",
"restart": true,
"runtimeArgs": [
"--debug=5858",
"--inspect-brk"
],
"port": 5858,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Note that the prop program must indicate compiled js file. In your case it is ${workspaceRoot}/src/main.ts, but should be ${workspaceRoot}/*compile directory eg. build*/main.js.
Also make sure the typescript recompiles the files to the target directory.
I am trying to debug mocha unit test in visual studio code. I followed this question and got this run configuration:
{
"name": "Run mocha",
"type": "node",
"program": "/usr/bin/mocha",
"stopOnEntry": false,
"args": ["testUtils.js"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"env": { "NODE_ENV": "development"}
},
It works. But it does not stop at breakpoints! If I run the file with a normal launch configuration, breakpoints are not ignored.
Any Idea what could be the reason for this?
This works for me, you need to point to _mocha. Using just mocha does not allow attaching breakpoints.
{
"name": "Debug mocha",
"type": "node",
"request": "launch",
"runtimeArgs": ["C:\\Users\\CS\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"],
"program": "${workspaceRoot}\\test.js",
"stopOnEntry": false,
"args": [
],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"env": {
"NODE_ENV": "development"
}
}
If you include the port and the "--debug-brk" argument, you should be able to debug mocha unit tests. I have the following setup in my launch.json file. I included the "--recursive" argument as well so mocha would run all tests in subfolders as well. With this configuration file, I just set my VS Code debugger to use the "Debug Mocha Test" configuration and I'm able to hit breakpoints in any of my test files.
{
// Use IntelliSense to learn about possible Node.js debug 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": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/server.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
},
{
"type": "node",
"request": "launch",
"name": "Debug Mocha Test",
"port": 5858,
"runtimeArgs": ["${workspaceRoot}/node_modules/mocha/bin/mocha"],
"cwd": "${workspaceRoot}",
"args": ["--recursive", "--debug-brk"]
}
]
}
You can verify the port mocha will use for debugging by running mocha --debug-brk
I have Visual Studio Code and I use it to write my Node.js applications. In tutorials I see that Visual Studio Code has IntelliSense and other debugging tools related to Node.js, but I don't find it when I write my apps so is there any extension, or how can I configure it to work with Node.js?
This is the first time for me to ask a question related to configuration not to code, so please be patient.
You need to install a plugin for Visual Studio.
You can find more information about this here:
https://github.com/Microsoft/nodejstools#readme
My project's working config ${workspaceRoot}/.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/test-script.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"PROFILE": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outDir": null
}
]
}
NodeJS is in the %Path%:
>node -v
v6.7.0