I'm trying to debug my TypeScript Express app using WebStorm.
I have this debug script in package.json
"scripts": {
...
"debug": "node --inspect-brk=9229 --require ts-node/register -r tsconfig-paths/register server.ts"
}
I run npm run debug in the command line and the following loads
Debugger listening on ws://127.0.0.1:9229/<somerandomid>
For help see https://nodejs.org/en/docs/inspector
Now I am able to debug from Chrome inspector by going to Chrome, type in chrome://inspect/ and server.ts would appear in Remote Target, and I can debug the TypeScript by clicking inspect. Hence I know that the problem is not my node.js configuration side.
The problem is, I can't debug when using WebStorm.
I tried the following WebStorm debug configuration:
Attach to Node.js/Chrome
Host: localhost
Port: 9229
Attach to: Chrome or Node.js > 6.3 started with --inspect
but when I debug in WebStorm the debugger keeps on saying "Connecting to localhost:9229" and nothing happens. It doesn't go to breakpoints even though I have set breakpoints in server.ts etc
I tried disabling firewall, still doesn't work. Tried using --inspect instead of --inspect-brk, still doesn't work.
What am I doing wrong, and how can I get WebStorm to debug into breakpoints using my node.js Express TypeScript configuration?
Works fine for me using your way to start the app/attach the debugger. What WebStorm version do you use?
here are 2 other ways to debug your app:
using Node.js run configuration (create similar configuration and press Debug):
using NPM run configuration:
change your script to "debug": "node %NODE_DEBUG_OPTION% --require ts-node/register -r tsconfig-paths/register server.ts" (if you are on Linux/Mac OSX, replace %NODE_DEBUG_OPTION% with $NODE_DEBUG_OPTION
click the arrow in the gutter, choose Debug
Related
To play with an SSO project in office.js, I am using :
https://github.com/OfficeDev/generator-office 1.9.2,
node v16.16.0,
npm v8.11.0,
Visual Studio Code Version: 1.71.2,
Windows NTx64 100.19044.
This also uses webpack (webpack#5.74.0).
I got this to work (required some changes to the generated project).
Now I am adapting the project to my needs and got it to build.
But it now fails to start the webserver.
On the terminal in VScode, I issue :
"npm start", which is composed of these other scripts:
"start": "npm run build:dev && concurrently "npm run start:server" "npm run sideload"",
"build:dev": "webpack --mode development",
"sideload": "office-addin-debugging start manifest.xml",
"start:server": "office-addin-sso start manifest.xml",
The terminal tells me:
"Starting the dev server... (webpack serve --mode development)
Unable to start the dev server. Error: The dev server is not running on port 3000."
What I have tried:
I have looked through the webpack window output, tells me: "webpack 5.74.0 compiled successfully in … ms" (but more below).
I looked through %LocalAppData%\npm-cache_logs.
I scoured the %LocalAppData%\Temp\OfficeAddins.log.txt
I killed and restarted everything I could think of.
I checked the port is not used (w/ netstat -ano | findstr :3000)
I changed the port, gives same error on that port (package.json : "config": {"dev-server-port": 3001})
I checked the code for remaining errors (w/ office-addin-lint check)
I checked the office certificates are installed (w/ npx office-addin-dev-certs verify)
I issued: npm update
Then with the terminal window and webpack still showing, it occured to me to open another terminal on the side and start another npm start.
This time, I got a somewhat shorter output of webpack in another node window (showing only one line webpack 5.74.0 compiled successfully in … ms", the webpack window above from the first terminal showed this line twice).
Below is a diff of the webpack window output (run from terminal2 on the left; the port 8080 was changed automatically to the free one; so some webserver went up after all? though I could not browse to e/.g. https://localhost:3000/fallbackauthdialog.html).
At this point, I can sideload the office add-in in Excel without add-in error, press its taskpane's button and get debug output (on terminal 2, not in the debug console).
Can you please help get back to a more standard debug configuration, and point out to me what I may be doing wrong, or what other diagnostics I could run?
I've started my application on my server with pm2:
pm2 start /path/lib/start-server.js --name="cdl-debug" -- --inspect
Which would be equivalent to node /path/lib/start-server.js --inspect
The application starts and runs, although I see no notice in the logs about any debugging like explained here
I've opened up port 9229 in the firewall and setup my WebStorm debug config with Attach to Node.js/Chrome like so:
Then when I run the debugger it tries to connect for a while and finally fails with the message: Connection timed out. No further information.
Is there something else I should do? The WebStorm documentation doesn't mention much about the required setup on the server.
When running node /path/lib/start-server.js --inspect, you are passing --inspect to your application, not to Node.js. As a result, debugger is not started. You need to make sure to pass --inspect-brk to Node.js in order to debug your app:
node --inspect-brk /path/lib/start-server.js
You can specify --inspect-brk in your pm2 process.json, like
"node_args": [
"--inspect-brk=7000"
]
and then start your app with pm2 start process.json
I'm a Java developer but I have to try and debug a Node based application which runs inside Electron. I use IntelliJ IDEA for Java development/debugging and have WebStorm for which I want to debug the JS application.
As a Java developer I am used to starting the JVM/Tomcat/OSGi container in debug mode to which I can attach IntelliJ as my debugger. This allows me to dynamically add breakpoints without modifying code in IntelliJ. I want to be able to do the same with the Electron application but I haven't been able to work out how to do this.
I have tried starting Election with the --inspect option as detailed here but cannot attach WebStorm to it. I've also tried setting up a run time configuration in WebStorm itself which works as far as starting Electron but terminates with the error 'connection refused'.
I've also used this and this to try and attach a debugger but to no avail. I also have to work on Windows so I'm facing having to deal with inadequate tools to determine if Electron is listening on a port.
Update
I can't put complete code here but I would start the application with:
npm run dev
And this is the relevant part package.json in the root folder of the application but WITHOUT any debugging options specified:
"dev": "concurrently --raw --kill-others \"npm run dev-server\" \"npm run start\"",
"dev-server": "webpack-dev-server --hot --inline",
"start": "cross-env WEBPACK_ENV=dev electron .",
The application starts up i.e. the Election window appears but terminates before it is completely rendered. I can't say for sure how far into the start-up it gets before failing.
Update 2
I've modified the package.json file dev and start lines to:
"dev": "concurrently --raw --kill-others \"npm run %NODE_DEBUG_OPTION% dev-server\" \"npm run %NODE_DEBUG_OPTION% start\"",
"start": "cross-env WEBPACK_ENV=dev electron --inspect=5858 --remote-debugging-port=9223 .",
But still get Connection refused.
To debug Electron main process, you need using Node.js run configuration; for render process, the Attach to Node.js/Chrome configuration is required.
Please see https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/ for more info
I found that WebStorm can debug the main process properly if electron is started with the flag:
electron . --serve --inspect-brk=5893
Note the 'brk', it stops the process until a debugger is attached.
Then I just created a run configuration (Attach to Node.js/Chrome) and specified the 5893 port, telling to reconnect automatically.
I've looked around and had a lot of trouble figuring this out. I'm hoping someone might be able to point me to a post or have information on how to do this.
My problem is that I have 2 projects I've made using WebStorm:
I have 1 application that is my server-side code running on port 3000. It's a simple Node Express app.
The second application is an Angular 4 / Ionic 3 application running the client side on port 8100.
I want to run my server application in debug mode, so that it hits the breakpoints for all the data being sent from the client side app.
For example: Angular / Ionic app sends a get request for all clients for a given customer. The customer is sent via url parameter. I want the server code to pause when it receives this request and so I can see this URL parameter. Fairly simple.
The server is also using grunt to build the project, and nodemon to watch it. I'm using some npm scripts to make life easy. Here are the scripts:
"scripts": {
"dev": "SET NODE_ENV=development && nodemon ./bin/www",
"grunt": "grunt",
"start": "node ./bin/www"
},
Nothing fancy.
I have WebStorm configured to run my scripts from hitting play. So the play button will first run the following sequence:
npm run grunt
npm run dev
Again ... nothing fancy.
Now how do I get this thing to setup a debugger so I can listen in WebStorm? I have a both projects open in separate windows, and I am initiating the calls to the server from the client. How do I make the break points grab hold and show me the data coming into the server?
I feel like this is incredibly easy and I'm missing something really stupid. Any help would be much appreciated.
You need starting you server in debugger to get breakpoints in your server code hit. If you prefer to start your app via npm script, you have to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) to make sure that Node.js is started with appropriate debug options (--debug-brk, --inspect-brk, etc)
So:
in package.json, modify your dev script as follows:
"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"
right-click your package.json, choose Show npm scripts
right-click dev script in npm tool window that opens, choose edit 'dev' settings to create a run configuration.
open your source files in editor, add breakpoints
press Debug to start debugging
run your client app, initiate the calls to the server
I am working on a nodejs project. I am thinking, is it possible to debug nodejs code like the way debug JavaScript in browser. I mean is there any tool or plugin available to debug nodejs.
https://github.com/node-inspector/node-inspector
^You can use node-inspector for debugging.
1) Start your node process in debug mode,
"node --debug-brk=5858 app.js"
2) Start node-inspector process with,
"nohup node-inspector &"
3) In your browser, go to:
http://127.0.0.1:9001/debug?port=5858
and start debugging.