Debug node.js backend application with an IDE, e.g. WebStorm - node.js

I added in package.json this into scripts:
"debug": "NODE_PATH=src nodemon --exec babel-node src/run.js --inspect",
It is pretending that it is debugging but jumping on selected lines how it pleases. I'm not that "expert" in JavaScript (I'm Java) but really this is pain in ass.
How can I debug backend without debug? Srry I'm angry because this is second time I'm giving change to JavaScript and this is second time I'm furious about this stupidity.
Thanks for any hints.
P.S.: if there is better software, tool to debug please just refer to it

In WebStorm, the easiest way to debug the application started via NPM stript is using the icon in the gutter: open your package.json in editor, right-click the icon to the left of your script and choose debug:
See also https://blog.jetbrains.com/webstorm/2017/09/debugging-node-js-apps-in-webstorm/
Note that:
babel-node is deprecated and not recommended for using in production. To get ES6 code compiled on-the-fly, try running node with -r #babel/register. see https://babeljs.io/docs/en/babel-register
by running nodemon --exec babel-node src/run.js --inspect, you pass --inspect to your application, not to node interpreter, so this command doesn't start the debugger. Node options have to be specified before the javascript file, otherwise the passed options will be treated as application arguments, not as node.js args

Right now, VSCode(Visual Studio Code) is considered as best tool for development, which is light weight and user friendly.
You can get different extensions based on your requirement.
To debug node js in vscode, go to debug window -> add configuration -> type attach process -> press ctrl + space -> press enter on attach suggestion.
After that, run command, node "your file name" --inspect
Press F5, your debugger will be attached
Node js debugging using VSCode

Related

Vue JS Intellij setup

I am working on a Vue js application but am having difficulty getting it to run/debug within IntelliJ. I am currently running it from the command line but I'm interested in getting it to debug in IntelliJ. Not many tutorials out here on getting this set up to work. Is there anyone that has experience in setting up this framework and IDE?
Steps are rather straightforward and described in blogpost:
First, install the JetBrains IDE Support Chrome extension. This will bind the browser debugger environment with IntelliJ in real-time.
start the server with npm serve (can be done from a gutter in package.json):
create a new JavaScript debug configuration, specify the URL your app is running on (usually http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.
See also https://blog.jetbrains.com/webstorm/2019/03/get-started-building-apps-with-vue-js-in-webstorm/ for some hints on working with Vue.js in IDEA. And https://medium.com/dailyjs/stop-painful-javascript-debug-and-embrace-intellij-with-source-map-6fe68eda8555
You can add "Run Configuration" for any project to run in Intellij. For this, you must have a run script in package.json.
Refer below link for a screenshot. NPM Run Configuration Sample:
Choose NPM and give like this. Once done, you are all ready for clicking the RUN button available in the toolbar to run the project

Issues with breakpoints in ts-node

I faced a very strange problem. I have two working PC and one of them stop breaking on the breakpoints in one day. Another PC works properly the same as before.
I tried to reinstall Node JS, ts-node and then even hard reset for windows (I use Windows) but without any success.
Then I thought that probably issue in my project and I tried to clone hello world project from google tutorial and I found that I still can't debug with it!
So I successfully run an app on my port but breakpoint won't hit. This stop working in VS Code, in WebStorm and even Chrome debugger.
This is how I run an app: "C:\Program Files\nodejs\node.exe" --inspect --require ts-node/register C:\Projects\node-typescript-starter-master\src\index.ts
Then I opened dev tools from chrome and I see this:
Then I pressed "inspect" and I see message in console:
Debugger attached. Debugger listening on ws://127.0.0.1:9229/8bae9408-867c-4278-9148-b6c90b35a8ae For help, see: https://nodejs.org/en/docs/inspector Debugger attached.
This is the next window. Seems like I missing any files overhere.
Does this mean that something is wrong with my file mapping ?
Please, let me any suggestion what can be a problem.
Well, one of workaround is to don't use ts-node and just use default node js debugger config from WebStorm with adding TypeScript prelaunch compilation script.
Here is a screenshot how to configure:

Nuclide debugger with node and babel?

I've been trying to use Nuclide/Atom to launch and debug a unit test that uses Babel and ES6+ code. The launch config looks like this:
Node runs the unit test as if I had run it from the command-line, and does not stop at my breakpoints. If I use the same invocation at the command-line with --inspect-brk I can debug correctly (with sourcemaps) from the chrome-devtools url in Chrome. Is there a way to make this work? I can't really "attach" since the unit tests are, and should be, a straight-shot script execution.
Nuclide currently does not support the new v8 Inspector protocol for debugging. You will need to use --debug flag to debug with Nuclide. Note, however, that the old debugger protocol has been removed from Node.js starting with Node.js 8.0.
PS. You can attach to a running Node.js process with Nuclide debugger just fine - just start your tests with node --debug --debug-brk ... and then attach the debugger from Nuclide. The test process will be stopped at first line, allowing you to resume execution at your own convenience.

How can I debug a Sails.js app with node-inspector?

In order to debug with node-inspector I need to start my app with the node --debug command. Up to this point I have only used sails lift to start my Sails.js app, so I am unsure of how to start my app using the normal node command.
So you can actually launch a sails project with node app.js --debug if you have sails installed in your project, rather than only system-wide. Go to your project's root directory and run npm install. Sails should already be in your package.json and thus should install to your project directory.
As of Sails v0.10.x, you can do sails debug instead of sails lift.
sails inspect since Sails v1.0
As of sails v1.0, sails debug is deprecated for newer Node.js, and you should instead use sails inspect.
This is documented at: https://sailsjs.com/documentation/reference/command-line-interface/sails-inspect and is presumably done to match the newer node --inspect interface.
Have you tried using node-webkit to run your node.js apps? This is what we use at work to debug our node.js server applications. It is quite useful runtime based on chromium which you can use to inspect your code using familiar breakpoints, stack traces, variable inspection and such without having to rely on node-inspector (which I find hard to use to be honest).
What you do is instead of using console command 'node you-app.js' you set the node-webkit to launch your app, run the webkit then open its console (which is the same as console in Chrome browser) and from there you can open your source files and start debugging like any other client side JavaScript code.
node inspect
You can also use the command line debugger with:
node inspect app.js
This stops at the beginning, so do a continue:
c
And now, when your code with a statement:
debugger
gets executed, you fall into the Node CLI debugger as usual.
Tested on Sail v1.1, Node v10.15.1, Ubuntu 18.10.
nodemon --inspect and nodemon inspect
You can use those to inspect when using nodemon, which automatically reloads the app on file save: Auto reloading a Sails.js app on code changes?
Those options are analogous to node inspect and node --inspect: node inspect works with debugger statements, and node --inspect works with the Chrome debugger.
Especially useful with the "Open dedicated DevTools for Node" feature: Can I get node --inspect to open Chrome automatically
nodemon inspect is a bit annoying as it requires a continue everytime you make any app changes and nodemon restarts the server. TODO find a way around it.

Is there a way to automatically reload node-inspector when server restarts?

It's a fairly small thing, but it feels like I'm manually refreshing the node-inspector tab in chrome a million times a day, and there must be a better way.
When a file changes, and node restarts, and node-inspector detaches from target -- is there a way for it to automatically re-attach itself?
This question is a duplicate of How can I make node-inspector restart when node is restarted?. See the accepted answer for a workaround solution using GreaseMonkey.
There is also a GitHub issue filled in the Node Inspector project: #266.
Here's instructions to have a Node console (not REPL), while using nodemon, with a server output console, all from within VSCode.
Node.js debugging in VS Code with Nodemon
The only thing to look out for is that it needs to be started manually with
nodemon --inspect ./bin/www
You can't let nodemon use your package.json start defaults because it won't restart.
The only thing this lacks is a webpage restart (if you're using web front end) but that's a whole other question.

Resources