How do we configure .vscode/launch.json to debug Deno projects?
The IntelliSense the VSCode provides when I was in configurations didn't offer an option for Deno. Or is there an extension for this?
You need to attach the debugger, as per the deno manual.
Create .vscode/launch.json replacing <entry_point> with your actual script and then F5.
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect-brk", "-A", "<entry_point>"],
"port": 9229
}
]
}
It will stop at the breakpoints you set on VS Code, tried here and it worked fine.
About the VS Code plugin:
Official support in plugin is being worked on -
https://github.com/denoland/vscode_deno/issues/12
The official VS Code Deno extension comes with handy debug support starting with v2.3.0.
Screencast from the PR:
Fresh projects
You can already press F5 to debug the active file without launch.json (quite useful).
To auto-generate launch.json with a Deno entry: Press CTRL+Shift+D (Open debug view) → "create a launch.json file" → Deno
Add Deno entry in existing launch.json
Press Add Configuration... in opened launch.json (see screencast above).
F5 will now trigger the currently active debug launch action.
Launch active file
To debug the currently active file in case of an already configured launch.json, change:
{
"type": "pwa-node",
"program": "${file}", // change "program" value to "${file}"
// ...
},
Create debug selection shortcut
// Inside keybindings.json
{
"key": "ctrl+alt+d",
"command": "workbench.action.debug.selectandstart",
"args": "Start debug task"
},
The shortcut is called "Debug: Select and Start Debugging" - see also this related post.
Enable log output in Debug Console
To have log output shown in the debug console, I still needed to add "outputCapture": "std" to the config entry. More infos:
Where is stdout for VS Code?
Debug output doesn't appear in debug console without "outputCapture": "std" #41600
Related
https://code.visualstudio.com/docs/editor/debugging
https://code.visualstudio.com/docs/nodejs/nodejs-debugging
to debug current file, you can use below configuration :)
"outputCapture": "std" allows deno to print to VS code console
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect-brk", "-A", "${fileBasename}"],
"outputCapture": "std",
"port": 9229
}
]
}
P.S. just added to Evandro Pomatti's answer
VSCode recently started to show some extra lines interleaved in my source files, with a Debug label. These lines are not part of my code, as I can see it's something the editor has inserted in the rendering of my code in between some lines.
Whenever I click on one of those (because the take the appearance of a link when I move the mouse cursor over them) I get the floating error message that can be seen in the top part of the screenshot.
The error message says:
Cannot find jest.js file!
What's this about and how can I get rid of it? It does not prevent me from using the editor, but it is annoying to have these lines randomly inserted in various places of my source code.
Here's the create-react-app .vscode/launch.json configuration that worked for me:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Plus the following settings in my .vscode/settings.json
{
"jest.pathToJest": "node_modules/jest/bin/jest.js"
}
Some additional references to a similar issues:
Reference:
This was the issue that fixed the problem for me:
* https://github.com/jest-community/vscode-jest/issues/136
https://github.com/jest-community/vscode-jest/issues/113
https://github.com/jest-community/vscode-jest/issues/125
https://github.com/facebook/create-react-app/issues/2709
https://github.com/facebook/create-react-app/issues/594
VSCode says it cannot find jest.js file
I am trying to use VSCode to debug a node app I am running.
I launch the app in a separate terminal and then use the attach to process configuration to hook into it.
The attaching works correctly and I get a side panel that says 'loaded scripts' with the files in my project. If I click on one of those and set breakpoints there it will work correctly.
If I set a breakpoint on a file I open through the VSCode editor the breakpoint is greyed out and when I hover over it will say 'Breakpoint set but not yet bound'.
How can I make it so that the breakpoints I set on the code are bound?
Try this configuration in your launch file:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"stopOnEntry": false,
"port": 5858,
"localRoot": "${workspaceRoot}",
"remoteRoot": "/somepath/myprojectroot",
"sourceMaps": true
}
Make sure the remoteRoot is correct path, otherwise it won't know where to look for the source files.
On the VSCode settings search for 'debug javascript use preview', and then disable it. It should now bound all breakpoints.
I had a similar problem, I fixed it by appending /src to the "webRoot" path.
Here is an Example to Demonstrate What I Did:
Originally my "webRoot" property read:
"webRoot": "${workspaceFolder}"
Now my webRoot path reads:
"webRoot": "${workspaceFolder}/src",
Here is my ./.vscode/launch.json reads:
{
// 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": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"trace": true
}
]
}
I had this issue with VSCode 1.52.1, the fix that worked for me was:
Disable debug.javascript.usePreview via Code > Preferences > Settings
Add "localRoot": "${workspaceFolder}/" to launch.json
Add "remoteRoot": "${workspaceFolder}/" to launch.json
The plain truth is that VSCode 1.20 does not allow you to hit breakpoints.
I tried 1.21 too, it also does not let you do it.
I went back to 1.18 and it works just as expected, no problem.
I faced the same issue...
After i try a lot of launch config combinations, i found the correctly.
{
"type": "node",
"request": "attach",
"name": "Attach Program",
"protocol": "inspector",
"restart": true,
"skipFiles": [
"<node_internals>/**"
],
"localRoot": "${workspaceFolder}",
"remoteRoot": "/",
}
Ps: I'm launch node script with nodemon using the --inspect parameter (that allow debugger to attach node).
I faced this issue as recently as yesterday after upgrading to VSCode 1.52.1. Debugger which was previously working fine suddenly started showing "Unbound Breakpoint". This was happening for all the breakpoints I was trying to set regardless of the place/file/line in code. I then had to add the "localRoot" property and make it point to my source code folder for it to start working again. Hope this helps. My launch.json configuration now looks like this
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"localRoot": "${workspaceFolder}/Source",
"type": "pwa-node"
}
For me, just adding "localRoot": "${workspaceFolder}" to my default launch.json Configuration did the trick.
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/bin/www",
"localRoot": "${workspaceFolder}"
}
I'm late to the party but wanted to share what was causing my "Unbound Breakpoint" errors.
I have file A and B. File A called into File B (and was required at the top of File A). File A's breakpoints were working perfectly. File B's sometimes let me hit them but I wasn't getting the full debugging experience if it worked at all.
I finally realized the require statement at the top of File A had different casing than the actual folder structure. It was requireing /path/to/file, where it should have been /Path/To/File.
I fixed the path casing and the breakpoints in File B starting working again.
The very first thing you should check is the entry point - the first line of code that gets executed. If that one can bound a breakpoint, then you know your other breakpoints are unbound because something between the time your other breakpoints are met is pre-empted by an error introduced. Your code is not reachable in that case and the IDE can detect that your module is not loaded at all.
If all this doesnt work - consider starting your vsCode in the correct folder
(the root directory, e.g. C:\Users\user\programming\RandomApp).
This is also why some people need to specify "/src" to their workspace variable (just a wild guess) and others dont.
Start it in the correct Folder and you dont need the /src parts in the launch.json file.
for me this launch.json works with vscode version 1.59.1
{
// 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",
"url": "http://localhost:8100",
"webRoot": "${workspaceFolder}"
}
]
}
I have a TypeScript project, which suddenly didn't hit breakpoints anymore. In my case I had to move the project folder out of my iCloud Drive folder. There were other indicators that this path wasn’t ok, like missing git gutter indicators, as well. Here is my debug launch config. Breakpoints placed in app.ts are being hit.
{
"type": "node",
"request": "launch",
"name": "Debug",
"program": "${workspaceFolder}/src/app.ts",
"sourceMaps": true,
"protocol": "inspector",
"cwd": "${workspaceFolder}",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
I'm using this configuration for debugging a TypeScript project:
{
"name": "Debug API",
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node",
"sourceMaps": true,
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
]
},
outFiles did the trick and bound my breakpoints (VS Code 1.51.1).
I am running Docker Compose with the VSCode debugger and in my case, some of the breakpoints I set show unbounded and some show as bounded, even after trying the solutions above.
It seems the unbounded ones are outside of functions (on require or variable initialization statements for example).
I can only assume this is because the debugger attach runs after the docker containers have started (and hence these breakpoints are unreachable).
#alkasai has the correct answer.
But, it also matters which source code folder was added to your workspace. My repository structure is as such: C:\git\parent_folder\child_folder\src
My breakpoints were not working, so long as 'parent_folder' was the folder added to my workspace and my 'webRoot' entry looked like this:
"webRoot": "${workspaceRoot}",
But, if I added '/child_folder' to 'webRoot' (e.g. "webRoot": "${workspaceRoot}/child_folder"), the breakpoints worked.
However, if I removed 'parent_folder' from my VS Code workspace, and instead added 'child_folder' to the workspace (thus changing the underlying value of the '${workspaceRoot}' variable value), the original entry (without the '/child_folder' subfolder reference) caused the breakpoints to be activated.
For me the problem was that I forgot to set "sourceMap": true in my tsconfig.json file.
To hit breakpoints you need to compile in debug mode.
So when compiling the code using your tasks.json have debug flags enabled in your command attribute. C++ example :
{
"version": "2.0.0",
"tasks": [
{
"label": "Compile Test",
"type": "shell",
"command": "g++ -g test.cpp",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": true
},
"group": "build",
}
]
}
I am talking about the -g flag in the "command": "g++ -g test.cpp",
For example, my root workstation directory is /home/chain/Project. And I have two separate projects which is python and website. My launch.json goes:
{
"version": "0.2.0",
"configurations":
[
{
"name": "Python",
"type": "python",
"request": "launch",
"stopOnEntry": true,
"pythonPath": "${config:python.pythonPath}",
"program": "${workspaceRoot}/python_project_source/test.py",
"cwd": "${workspaceRoot}/python_project_source",
"env": {},
"envFile": "${workspaceRoot}/.env",
"debugOptions": [
"WaitOnAbnormalExit",
"WaitOnNormalExit",
"RedirectOutput"
]
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "${workspaceRoot}/website/test.html",
"webRoot": "${workspaceRoot}/website"
}
]
}
As expected when I select test.py and press 'F5' it can switch to python debug environment, and when I select test.html the Chrome will be opened.
The fact is, VS code only remember the environment I debugged last time rather than change it automatically. So the only thing I do now is adding some comments to one environment (/* */) when I need to compile the other.:(
Is there something wrong in my launch.json?
Automatically switching the debug environment based on the file (or file-type) is not a current feature of Visual Studio Code, I believe.
You'll have to manually switch the launch configuration depending on the type of debugging task you want to perform.
And, of course, you could consider writing a feature request: https://github.com/Microsoft/vscode
I have just started with Perl today and installed ActivePerl 5.24.1 and everything went well. I was able to create my test program testPerl.pl with simple a print command and run it through console.
Now I wanted to use Visual Studio Code to run my Perl script, and so I opened the project folder [testPerl.pl location] with Visual Studio Code and tried to debug the code. I have installed the Perl-Debug extension in the editor and when I hit F5, Visual Studio Code asked me to Select Environment and I chose the Perl Debug option, which actually created the launch.json file for me with the below contents.
{
"version": "0.0.2",
"configurations": [
{
"type": "perl",
"request": "launch",
"exec": "perl",
"name": "Perl-Debug",
"root": "${workspaceRoot}/",
"program": "${workspaceRoot}/${command.AskForProgramName}",
"inc": [],
"stopOnEntry": true
}
]
}
I have kept default values as it, and when I hit F5 again, it asked me for a command with default value test.pl. It is because of ${command.AskForProgramName}, I assume. I entered my file name testPerl.pl in the command, but then nothing happens. It starts and ends without any print in console.
How can I actually configure this launch.json file or is there another way I need to do this?
I tried with a newer version of the plugin: Perl Debug version 0.2.0.
This works out of the box. The proposed configuration looks as follows:
{
// 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": "perl",
"request": "launch",
"name": "Perl-Debug local",
"program": "${workspaceFolder}/${relativeFile}",
"exec": "perl",
"execArgs": [],
"root": "${workspaceRoot}/",
"inc": [],
"args": [],
"env": {},
"stopOnEntry": true
},
{
"type": "perl",
"request": "launch",
"name": "Perl-Debug remote",
"program": "${workspaceFolder}/${relativeFile}",
"root": "${workspaceRoot}/",
"stopOnEntry": true,
"port": 5000
}
]
}
Do note I tried this out on a Mac, with Visual Studio Code version 1.24.0.
I ran Visual Studio Code on a Mac and changed
"program": "${workspaceRoot}/${command.AskForProgramName}"
to
"program": "${file}"
to get the current file to debug.