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.
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?
When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?
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
I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start
When I run "npm run dev" which is dev: "webpack-dev-server --content-base src --inline --hot" it runs correctly and even updates the page im working on. However if I end the process then in the same terminal run the command "npm run dev" a second time it returns an error!
I have only just started learning webpack/react/node so I don't know whats going on.
You probably has another webpack server running or it was not properly shut down, so the address (127.0.0.1:8080) is in use. See the error message.