Electron + React Debug with WebStorm

Run / Add configurations...

截圖 2021-09-19 下午5.41.42.png

Add npm

截圖 2021-09-19 下午5.48.33.png

Scripts: react-start Environment:

  • PORT=3003
  • BROWSER=none

截圖 2021-09-19 下午5.42.09.png

When it finish, Click OK button on then bottom-right.

Then run the config, ensure it is success run server. You could open localhost:3003 on the browser.

截圖 2021-09-19 下午5.55.34.png

截圖 2021-09-19 下午5.57.17.png

Stop it.

Add other configuration.

Add node.js configuration

截圖 2021-09-19 下午6.00.02.png

name: "Electron: Main Process" Node interpreter: "/Users/alger/code/my-electron-app/node_modules/.bin/electron" Environment Variables: PORT=3003

The path is my computer folder. You should select electron in your folder place this project [your-project-folder]/node_modules/.bin/electron.

截圖 2021-09-19 下午6.19.32.png

Attach to node.js/chrome

Add Compound Name: "Electron: All" Add three items we add configurations before.

截圖 2021-09-19 下午6.12.33.png

Click "OK" button, Then run by "Electron: All" configuration.

Run by Electron: All

At electron window, Choice Menu "View / Reload".

References