Code repository: https://github.com/hilanmiao/LanMiaoDesktop
Tips: Because I am using electron-vue scaffolding, the structure (file directory) is more complicated. If your project is very simple, such as the entry is in main.js in the root directory, then you don't need to read this article, just right-click debug runs just fine.
It is best not to submit the debugged code, not everyone needs to debug! ! ! Because it will be stuck on the first line, such as --inspect-brk
Method 1: Use chrome://inspect to debug
1. Modify two codes to facilitate our debugging
2. Run npm run dev, then open in the browserchrome://inspect
3. Add 5858the listening port,
Then wait for a while or refresh the page, the target you want to debug will appear, clickinspect
Then add our project source directory, and select "Allow" in the pop-up authorization window
Then start debugging our code and it's ok.
However chrome://inspect, there are some precautions for use, you can refer to the article https://newsn.net/say/chrome-inspect-electron.html In fact, it is not as troublesome as the author said, but it does take a few more tries to get familiar with it and it will be smooth.
Method 2: Use webstorm to debug (there is a problem, to be improved)
There is a problem at present, debugging is indeed possible, but my picture is not rendered wow! ! ! I'll ask other comrades about this.
If you are using a relatively simple architecture, such as the official one quick-start, the entry is in the root directory, no matter how much tossing it is ok, just right-click to debug, so easy...
But my project is more complicated, all need to configure two places, as shown in the figure
Node interpreter: 项目目录/node_modules/.bin/electron.cmd(mac下是/electron)
Node parameters: --inspect-brk=5858 .
Then debug is ok
Method 3: Use vscode to debug
It seems that vscode is also very simple, but I haven't tried it. I recommend everyone to read Uncle Sunan's article
https://newsn.net/tag/vscode/2/
