I want to speed up development by learning to debug my programs in Visual Studio Code. I had been following the vsCode docs but ran into a snag.
I used Express (v4.16.0) to generate a plain project and added the default Node.js (v8.11.3) debug configuration to Visual Studio Code (v1.25.1)
Launching the Visual Studio Code debugger and going to the link it is listening on yields a loading blank page.
Here is a GitHub repository of the project.
When I begin debugging, vsCode prints to the debug console Debugger listening on ws://127.0.0.1:3804/123e990c-24a1-475c-beff-039206890946. I would navigate there thinking that was the new address of my project. It is not.
The address of my project is still what I specified in Express, localhost:3000. Navigating there after starting the vsCode debugger does trigger my break points and allow me to navigate my application.
sigh
{
"type": "node",
"request": "launch",
"name": "Launch",
"program": "${workspaceRoot}/bin/www"
}
change the value in program key
Related
Using WSL2/Ubuntu18 I've not been able to make the VSCode NodeJs Debugger to stop on the breakpoints of any NodeJs app. When I start the debugger, it runs (I can see the output on the integrated terminal) but breakpoints are simply ignored.
The simple.js file, with a breakpoint on line 3:
The launch.json is set to:
{
"version": "0.2.0",
"configurations": [
{
"name": "NodeJs: Launch Program",
"program": "${file}",
"request": "launch",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node",
"console": "integratedTerminal"
}
]
}
When I press F5 or click on the "Start Debugging" button on VS Code, the app runs and following appears on the integrated Terminal:
/usr/bin/env 'NODE_OPTIONS=--require /home/myuser/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"/tmp/node-cdp.19338-1.sock","deferredMode":false,"waitForDebugger":"","execPath":"/home/myuser/.nvm/versions/node/v14.15.1/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/tmp/node-debug-callback-ff32d873905abafa"}' /home/myuser/.nvm/versions/node/v14.15.1/bin/node ./simple.js
Debugger attached.
0
1
2
3
4
Waiting for the debugger to disconnect...
I've already upgraded from Node10 to Node14, but the problem persists.
On another computer using WSL1, and using the same launch.json the debugger stops at the given breakpoints. Do I need to set something additionally on WSL2? For the record, this is what appears on the integrated terminal on the WSL1 computer before it stops at line 3:
/usr/bin/env 'NODE_OPTIONS=--require /home/myuser/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"/tmp/node-cdp.787-3.sock","deferredMode":false,"waitForDebugger":"","execPath":"/home/myuser/.nvm/versions/node/v14.15.1/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/tmp/node-debug-callback-b901b6d6e3e9799b"}' /home/myuser/.nvm/versions/node/v14.15.1/bin/node ./simple.js
Debugger attached.
<Breakpoint hit and stop...>
Additional info, debugging Python3 files work correctly on both machines.
Both computers have the same VS Code Version installed.
Update:
You can follow the issue on GitHub: https://github.com/microsoft/vscode/issues/113283
The problem is that the NodeJs App is being run from a symlinked address - so the debugger can not handle it.
Answer from one of the developers of VSCode/NodeJS on github:
It looks like you have your script symlinked into /bin/nhosko/simple.js, but its actual location is /mnt/c/Users//bin-nhosko/simple.js. In this case you need to specify some flags so that Node will report the linked location that vscode sees and told the debugger about: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_can-i-debug-if-im-using-symlinks. I want to make the debugger smart enough to fix this automatically in microsoft/vscode-js-debug#776.
https://github.com/microsoft/vscode/issues/113283#issuecomment-750371948
I'm trying to attach remote debugger of Visual Studio 2019 to node.js app in docker container. What I do:
I have created example node.js/express project in Visual Studio using "Basic Node.js Express 4 Application" template.
I have created docker image with following dockerfile:
FROM node:alpine
ADD ./TestApp/ExpressTestApp/ /
ENTRYPOINT node --inspect="0.0.0.0" /app.js
I launch container with following command:
docker run -p 3000:3000 -p 9229:9229 test
The app works, pages open on address http://localhost:3000/, console output states that debugger is active:
Debugger listening on ws://0.0.0.0:9229/73b5b00d-a492-4842-81e5-d50c12e64ac9
For help, see: https://nodejs.org/en/docs/inspector
In Visual Studio 2019, I click "Debug -> Attach to process...". In opened dialog I choose "Chrome devtools protocol websocket (no authentication)", enter ws://localhost:9229/73b5b00d-a492-4842-81e5-d50c12e64ac9 as a connection target and I can see and connect to node.js debugger in docker:
I can successfully attach to the process (node.js output states "Debugger attached."). But I can't use breakpoints in source files. When I place brakepoint, it shows the message "The breakpoint will not currently be hit. Breakpoint set but not yet bound."
How to make it work in Visual Studio?
I've tried to debug my app in VS Code, using following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to remote",
"protocol": "inspector",
"port": 9229,
"localRoot": "${workspaceFolder}",
"remoteRoot": "/"
}
]
}
And it works perfectly. Breakpoints, variables values watching and etc. And I don't need to specify generated GUID of debugger, which is great too.
How to achieve the same thing in Visual Studio 2019?
I'm trying to debug a Next.js app with a custom server which I normally run with a dev Yarn script that executes node server.js.
VSCode includes a Node.js debugging extension and this guide, which I've followed. I created a new Yarn script called dev:debug that runs node --inspect server.js, and the following configuration in launch.json:
{
"type": "node",
"request": "launch",
"name": "Debug via Yarn",
"runtimeExecutable": "yarn",
"runtimeArgs": ["dev:debug"],
"port": 9229
}
However some breakpoints in modules imported by server.js are skipped and I'm not sure why. Other breakpoints in Next components do work when I load pages in my web app. Any ideas?
OK! Here's what's happening (and I'm posting all this to SO because I couldn't find the answer online):
When you build a Next.js app, you're writing BOTH the server app (node), AND the server-side web app (next), which are separate things! Additionally, you're also building a client-side app (React) on top of that. (If you're used to other platforms like PHP or Python web apps that use servers like the built-in ones, Apache, or NginX, this isn't obvious!)
Running node --inspect server.js tells the debugger to load the server and THEN start debugging your web app ONLY ("user code").
Solution: node CLI has a special --inspect-brk option to use when you also want to debug the code of the server itself! Yep, the solution is 4 more characters (-brk).
I was following the tutorial for creating an advanced Outlook add-in here (Git the Gist)
The above is a node.js-app which uses Yeoman and Microsoft Office Add-in Project Generator. To simply start the add-in, you just type 'npm start' in your root project folder.
But: I want to debug the add-in in Visual Studio Code.
VS Code automatically creates a launch.json file when you want to debug a project. This file looks like this:
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\bsconfig.json"
}
]
However, when I debug I get the following error:
Cannot launch program 'c:\ZTesting\outlooktest\bsconfig.json'; setting
the outFiles attribute might help.
So are these outFiles truly the problem and - if so - what should they be?
And - if not - what is the solution towards debugging a web add-in created with node.js, Yeoman and Microsoft Office Add-in Project Generator?
The bsconfig.json file looks like this:
{
"ui": {
"port": 3000
},
"server": {
"routes": {
"/node_modules": "node_modules"
}
},
"https": {
"key": "./certs/server.key",
"cert": "./certs/server.crt"
},
"watch": true,
"files": "*.*"
}
I did not find out how to debug the add-in above in Visual Studio Code. However it is possible to debug the add-in with the F12-developer-app from Windows 10.
You can find more information about the F12-app here:
Debug add ins using F12 Developer-app from Windows 10
I have the same problem today.
However, there is a tricky way to debug your outlook add-ins if WIN10 F12-app not able to open your html file.
you can use tbody.append to show any value when you debug your add-ins in outlook
var tbody = $('.prop-table');
tbody.append(makeTableRow("asyncResult: ", item));
function makeTableRow(name, value) {
return $("<tr><td><strong>" + name +
"</strong></td><td class=\"prop-val\"><code>" +
value + "</code></td></tr>");
}
I had this same problem. The root cause is that the app does not actually run on the server. npm start actually runs a separate program, called webpack. You can see this by opening package.json. There should be a line like the following:
"start": "webpack-dev-server --mode development --https --key ./certs/server.key --cert ./certs/server.crt --cacert ./certs/ca.crt --port 3000"
When you run npm start, it adds node_modules/.bin/ to the path before running that line. So this script is actually calling an executable called node_modules/.bin/webpack-dev-server. Webpack does not run any of the code in index.js. It "packs" the code, and broadcasts it over https to the client.
Since the app code only runs on the client, it can only be debugged on the client. The use of npm start makes it look like you're writing server code, but the add-in is actually running clientside.
Visual Studio code has some awesome debug functionality built in that makes it easy to debug applications with node. However, my application is configured to use PM2. How can I set up Visual Studio Code to debug with PM2?
You can add a launch configuration in VSCode, in the file named launch.json, that attaches to the process you want like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"processId": "${command:PickProcess}"
},
{...}
]
}
Press ctrl+shift+D to show the debug section in Visual Studio Code, pick "Attach to Process" and then press "play". VSCode will automatically show you the options available on you local machine. Besides the process ids of the running node processes VSCode shows the full path of your node app so it is easy to pick the right process to attach.