Electron allows you to build cross platform applications using only JavaScript, HTML and CSS (or ECMAScript 6, TypeScript, CoffeeScript or any language that compiles to JavaScript). It provides lots of native OS APIs for things like OS notifications or automatic updates.
There are several well-known apps that use Electron, for example Slack and Atom, as well as a great number of open-source apps built on Electron that you can learn from.
Let’s have a look at how you can set up your workflow with the Electron app in WebStorm: how to enable the coding assistance and how to run and debug Electron application.
Configuring code completion
To enable coding assistance for the Electron APIs in you project, all you have to do is to add github-electron.d.ts as a JavaScript library. Go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Download…, search for github-electron and download it.
The downloaded TypeScript definition file contains the descriptions of all the Electron APIs. It is used by WebStorm to provide code completion, information about method parameters and documentation.
To get code completion for Node.js APIs, go to Preferences | Languages and Frameworks | Node.js and npm and click ‘Enable coding assistance’.
Running and debugging Electron app
In Electron, there are 2 types of processes: the main process, which manages the web pages of your application and handles system events, and the render process, which is related to every individual page of the app and hosts most of the application logic.
Running and debugging the main process
If you want to see what happens on application start, you need to debug the main process.
Create a new Node.js run/debug configuration, and specify the path to the Electron executable in the Node.js interpreter field and the path to the app’s main JavaScript file. That’s it!
Save the configuration, put the breakpoints and press Debug. Or, press Run to simply start the app.
Electron executable is what you use to start your Electron app from the command line.
If you have installed Electron (the electron-prebuilt package) locally, it should be located in your project node_modules under .bin folder. On OS X and Linux that should be electron, while on Windows it’s electron.cmd. You can also specify the path to the globally installed Electron.
The path you need to specify in the JavaScript file field is the path to the app startup file – the same file you have in the main field of your package.json.
Debugging packaged apps
You can also debug packaged Electron apps – just make sure you specify the path to Electron inside the built app in the Node.js run/debug configuration. For example, for a built OS X app, that would be your_app.app/Contents/MacOS/your_app; for a built Windows app it’s your_app-win32-x64/your_app.exe.
Debugging the render process
To debug the render process of the app in WebStorm, first start the app with an additional option --remote-debugging-port=9222 (select any port you like).
You can either add this option in the Application parameters field in the previously created Node.js configuration for the main process and use it to start the app, or run the app from the command line with this option.
Once the app is running, start a new Chromium remote run/debug configuration on port 9222 to attach to the render process.
You can also start debug sessions for both configurations. In this case the breakpoints would be hit both in render and main processes.
Debugging TypeScript Electron apps
If you’re writing your app in TypeScript (or actually any language that you then compile to JavaScript) and want to debug it, make sure that the compiler generates source maps. For example, for TypeScript, add "inlineSources": true, "sourceMap": true in the project tsconfig.json file.
Debugging apps with Webpack
Please don’t forget to add devtool: 'source-map' option to your webpack.config.js file, when you want to debug Electron apps built using Webpack.
– JetBrains WebStorm Team
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
