Getting started with Electron in WebStorm

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

Updated on June 27, 2017: The coding assistance for the Electron APIs is provided via the electron.d.ts TypeScript definition file. Starting with Electron v1.6.9 this file is included in the electron node module.

If you have electron listed as a project dependency, WebStorm can automatically locate this file in the node_modules folder.


But if electron is installed as a global dependency, to get the proper code completion you need to add electron.d.ts as a JavaScript library. For that go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Add… and specify the path to this file located in the global node_modules/electron folder. You can also download the file manually from the GutHub and link to it.

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; 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).

Update: --remote-debugging-port option doesn’t work with Electron 1.6 and higher (please follow this GitHub issue).

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , . Bookmark the permalink.

93 Responses to Getting started with Electron in WebStorm

  1. Bob Cochran says:

    Thank you for providing this. I have been playing with Electron recently and wondered how to import and test an Electron project in Webstorm.

  2. Cameron says:

    How do you debug the main and renderer at the same time, like you mentioned?

    • Ekaterina Prigara says:

      You just start the debug session for the main process and the debug session for the render process.

      • jdawg says:

        Can you elaborate please with an example?

        • Ekaterina Prigara says:

          Please do the steps described in the blog post in sections ‘Running and debugging the main process’ and Debugging the render process. Start the first configuration and then start the second configuration (do no stop the first one). That’s it.

  3. David Cotter says:

    Once small typo: the “dash dash” has been replaced by one “long dash”: see below. This stops debugging working

    To debug the render process of the app in WebStorm, first start the app with an additional option –remote-debugging-port=9222
    should be

  4. Sascha says:

    How does this work in Intellij 16: When clicking on Add… there is no way to download anything. What am I missing?

    • Ekaterina Prigara says:

      Sorry, my bad, it’s the Download… button. Fixed in the post.

      • Sascha says:

        Hi Ekaterina

        Thanks. Interestingly, I do not see a github-electron entry in the downloads list. What am I doing wrong?

        • Ekaterina Prigara says:

          Hmm, that’s quite weird. It should look like this:

          • Sascha says:

            Thanks. It works now.

            Don’t know what the problem was. I restarted IntelliJ , deleted jsLibraryMappings.xml in .idea folder of the project, and after that: voilà!

  5. Fred Vader says:

    Regarding using TypeScript; I had webstorm insert the default tsconfig.json file for me and also went into Preferences-> Lang & Frameworks > TypeScript and checked Enable TS Compiler and Use tsconfig.json.

    Do I also need to add typescript to my package.json as shown below? Thanks!

    “devDependencies”: {
    “electron-packager”: “^7.3.0”,
    “electron-prebuilt”: “^1.2.7”,
    “concurrently”: “^2.0.0”,
    “lite-server”: “^2.2.0”,
    “typescript”: “^1.8.10”,

    • Ekaterina Prigara says:

      You can use either a built-in TypeScript compiler, then you don’t need to have TypeScript installed in node_modules, or set up some other build tool like Gulp, then you do need it.

  6. Marius says:

    I’m having some problems running the process. All I get is “CreateProccess failed with error 193 (no message available).

    My settings:
    Node interpreter: C:\Code\Webstorm\Electron\Lab\node_modules\.bin\electron
    Working directory: C:\Code\Webstorm\Electron\Lab
    JavaScript file: app.js

    I’m running Windows 10

    Any one know what I can do to get around this problem?

  7. Peter says:

    The main process works for me, but no breakpoints are hit in the renderer.
    I’m using typescript and I’m using the latest EAP version (WebStorm 2016.3 EAP
    Build #WS-163.4396.14, built on September 14, 2016)

  8. Frank Arnold says:

    Is developing with Electron also supported with PHPStorm or is there a difference between Webstorm vs PHPStorm for node.js/Electron or Node Webkit?

  9. Edik says:

    I try to use a Configuration:

    node interpreter –

    working directory –

    javascript file –

    _Run_ is fine.

    But when I try to use _Debug_,
    I take a error message:

    “D:\Program Files (x86)\JetBrains\WebStorm 2016.2.3\bin\runnerw.exe” D:\workspace_webstorm\shn-elect-000\node_modules\.bin\electron.cmd –debug-brk=61115 –expose_debug_as=v8debug D:\workspace_webstorm\shn-elect-000\main.js

    ReferenceError: v8debug is not defined

    Ekaterina, can you possibly to help me ?

    • Ekaterina Prigara says:

      Please ignore this message (it’s related to the upcoming changes in the Node.js debugging protocol), it should not affect debugging your app. Sorry for confusion.

  10. polina says:

    My typescript module(which i use in render process) is required as usual module and it contains only ./out directory with js files, but I want debug it as ts code. I tried to add source map to files in ./out dir, where source is my local ./src dir, but Chromium remote does not see them. Chromium remote use only js files from ./out dir :(
    How can i fix it?
    I also tried add tsconfig with something like this but it also does not work

    "outDir": "./node_modules/myTSmodule/out/",
    "sourceRoot": "../myTSmodule/src/",
    "mapRoot": "../myTSmodule/out/",
    "inlineSources": true,
    "sourceMap": true
    "include": [

  11. Robert Derus says:

    Did something change in WS 2016.2? I cant find “Preferences | Languages and Frameworks | JavaScript | Libraries, click Download”

  12. Kevin says:

    Create NodeJS run\debug configuration for the Main process and Chromium remote configuration for the Render process.
    Run NodeJS configuration, then Chromium remote configuration.
    Main process is OK.
    Chromium remote successfully connected, but nothing happens – breakpoints are not hit, console.log message are not shown.
    Why? How to fix it?


    • Konstantin Ulitin says:

      Could you please enable logging by setting js.debugger.wip.log property in Registry (Help|Find Action|Registry) to some file path like ~/wip.json, start debugging and attach resulted file? Feel free to create a support request for it, it will be more convenient to continue the investigation there.

      • Michael Dong says:

        I have some similar situation like Kevin.
        I could debug in Main process and Render process.And the breakpoints are hit in render process, but console.log messages were not shown too!

        I have changed the setting js.debugger.wip.log property for “~/wip.json”,so i got the file . but the console of chromium remote debug
        still empty.

  13. Liam says:

    For anyone who had trouble getting the webstorm interpreter dialog to find the .bin folder or the /usr directory on a mac. A workaround is to create a symlink to the .bin or /usr/local folder and then select the electron binary.

    For example in my home directory ~/ I did:
    ln -s /usr/local/ ~/usr_local_symlink

    After that I was able to access the electron binary from the dialog. There must be a better way to accomplish this but in the short term this is for anyone who is stuck.

    • Ekaterina Prigara says:

      You can hit Shift-Cmd-G (it’s a default shortcut on macOS in Finder for Go to folder) when you see a file chooser in WebStorm and type the path you need to get to, e.g. /usr.

      • John Wilson says:

        Good tip, though I’ve oddly had mixed results with it. Worked for me once, then it locked up the open dialog the next time I tried it. In the end I found hitting Cmd-Shift-. (period) will cause hidden files like .bin to be shown in the dialog box. Just another option if anyone runs into problems with Shift-Cmd-G like I did.

  14. Robert Ferentz says:

    I’m attempting to debug the main process of my electron app according to this

    I’ve set up everything as described, but am getting an error when attempting to debug.

    /Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/cli.js –debug-brk=56546 –expose_debug_as=v8debug /Users/robertferentz/Work/connect-admin/src/index.js App threw an error during load Error: Cannot find module ‘/Users/robertferentz/Work/connect-admin/–debug-brk=56546’ at Module._resolveFilename (module.js:455:15) at Function.Module._resolveFilename (/Users/robertferentz/Work/connect-admin/node_modules/electron/dist/ at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at init (/Users/robertferentz/Work/connect-admin/node_modules/electron-compile/lib/config-parser.js:279:16) at main (/Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/es6-init.js:38:29) at Object. (/Users/robertferentz/Work/connect-admin/node_modules/electron-prebuilt-compile/lib/es6-init.js:41:1) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32)

    I’ve made sure all the settings are correct. Could be because I’m using electron-forge or does it not have anything to do with it?

  15. Kim Gentes says:

    I have one Electron main.js process and TWO (2) render processes. How do I point my debugger to a specific render process that I want to debug?

    • Ekaterina Prigara says:

      You should do the steps described in Debugging the render process section of the blog post. The only difference is that when you start the Chromium remote configuration, WebStorm will ask you what render process out of two you’d like to debug.

  16. Aland Kuang says:

    I’m on IntelliJ 2016.1 Ultimate and I can’t find “Preferences | Languages and Frameworks | JavaScript | Libraries, Download”. I cannot locate “Libraries.” Is this a new feature in 2016.2 and onwards?

    • Ekaterina Prigara says:

      Please make sure you have JavaScript support enabled in Preferences | Plugins.

      • Aland Kuang says:

        I was meaning to say I was using WebStorm 2016.1. Sorry about that.

        I do see that Javascript support is checked. I just updated WebStorm and I still can’t see the Libraries.

        • Ekaterina Prigara says:

          It seems that you’re looking at the default settings instead of project settings. Libraries are only available in project settings.

          • Aland Kuang says:

            Ah. I made an empty test project and now I see Libraries and I could see the downloads. Thanks for the help!

  17. Aland Kuang says:

    I can’t find github-electron in the list. I tried Sascha’s solution but I couldn’t find the referenced file.

    I updated to WebStorm 2017.1.

    Here’s a link to a screenshot:

    However, I see a choice called electron and electron-* where * is any word. Is electron the new name for it?

  18. GaldanM says:


    I’ve something weird with downloading the Electron library, there a re only 3 items in the list…

    Here’s a screenshot :

    Do you have any idea why ?

    Thanks in advance

  19. Oren Harroche says:

    To spare anyone else the sadness and insanity I had to go through:
    1) Currently, when you click on “Download…” and choose “TypeScript Community Stubs” you will get bupkiss. That is because the TS repository has apparently been restructured.
    You can read about it here (which also details how to manually add self-downloaded libraries as a workaround):
    It’s been fixed in (not yet available) 2017.1.1. Unfortunately, it does not appear that they plan to push this fix to older versions? (

    2) (Probably less relevant) The “Libraries” option will not show up at all if your Git executable is not configured correctly.

    • Ekaterina Prigara says:

      Thank you for your update. We are considering to backport the changes to WebStorm 2016.3 and probably WebStorm 2016.2, but it’s not final decision yet.

  20. Chris says:

    I’m new to Electron development, I’m just about to start setting up my Electron development environment and I find this post makes a lot of assumptions about what is already installed.

    Is there an article that completely describes the whole Electron/IntelliJ setup steps?

    • Ekaterina Prigara says:

      This post only describes the steps you need to perform to configure Electron support in WebStorm. It’s assumed that you’re already familiar with Electron and/or read Electron Quick Start.
      Please let me know what specific issues you had following this tutorial. I will try to answer your questions.

  21. Mike Mangialardi says:

    I’m working with an electron scala.js app and I am unsure how I would configure that in IntelliJ.

  22. Shawn says:

    Has anyone had experience debugging with webstorm and electron-vue?

    The dev script runs this:

    • Ekaterina Prigara says:

      We haven’t tried that ourselves. Did you experience any issues?

      • Shawn says:

        I have not really been able to get it to work. I tried to follow the instructions here as an example and sorta had the main process work, but it lost it as I stepped. I had to run the dev task and also run the node configuration pointing at the I have not been able to get the render process to work at all.

        • Ekaterina Prigara says:

          I gave it a try and was able to debug the render process. All I did was adding ‘–remote-debugging-port=9222’ to the runner.js at line 38 like this: run('cross-env NODE_ENV=development electron app/src/main/ --remote-debugging-port=9222', BLUE, 'electron').
          Then I started the dev task and created and started a Chromium remote configuration as described in the blog post.
          I haven’t tested anything complex. I added a button to the CurrentPage.vue and was able to stop on the method once I clicked it.

  23. Lucio Paiva says:

    Be careful not to mistakenly select the Electron binary located in node_modules/electron/dist/electron, otherwise Webstorm won’t be able to connect (it will show a “Connection refused” message after a few seconds). Webstorm needs to run your app via the link located in node_modules/.bin/electron (which actually points to a Node.js script that will ultimately invoke Electron itself), as Ekaterina explained.

  24. David says:

    I’m trying to download the Electron TypeScript definition files, but I don’t see one simply called “electron.” There are files named “electron-config,” “electron-debug,” “electron-devtools-installer,” “electron-json-storage,” “electron-notifications,” “electron-notify,” “electron-packager,” “electron-settings,” and “electron-window-state.” Do I want some or all of those or am I missing something? Thanks.


    • Ekaterina Prigara says:

      It seems that they’ve been removed from the DefinitelyTyped repo 4 days ago because the Electron team is going to publish them with every Electron release.
      To use the Electron.d.ts file in WebStrom, download it from this page, then in Preferences | Languages & Frameworks | JavaScript | Libraries click Add…, then click the “+” button and specify the path to the downloaded electron.d.ts file.
      We’ll update the blog post.

  25. Dave says:

    Thanks for posting this. Very helpful.

  26. Marek says:

    I added electron.d.ts to libraries, but still the documentation not working.
    Any ideas why?

    • Ekaterina Prigara says:

      Sorry, but the URL you’ve specified is the link to the External documentation meaning that the IDE will open this URL in the browser when you call the External documentation action. The docs shown on the screenshot in the blog post are the docs provided in the electron.d.ts file. Unfortunately, they are not available for every symbol. And actually, in the more latest versions of this file, the amount of docs has decreased. You can see that if you open electron.d.ts and go through it.

  27. Thomas says:

    I have WebStorm 2017.2.2; but the code completion does not work for Electron.

    The Electron package is installed as a Node module in my project and run well. For a known API, after I complete the typing of its name, I can traverse into the electron.d.ts to see the details of its parameters.

    However, during coding like typing the first part of the API name, the API in the electron.d.ts file is not shown in the popup dialog.

    I have followed the instructions given above to enable Node.js and NPM. I also have Node.js Core and /node_modules checkboxes selected in the Preferences > Languages & Frameworks > JavaScript > Libraries panel; but the APIs from electron.d.ts are still not shown in the popup dialog during coding.

    Could you please check it out?

    Thanks very much in advance for your kind help and support.

    • Ekaterina Prigara says:

      Can you please add a small code sample that shows the case when completion doesn’t show up. Please include the line where Electron is imported in that file. Thank you!

      • Thomas McDiamond says:

        Sample code and comments are added as requested. Please review.

        const electron = require(‘electron’);
        const { Tray, app, Menu } = electron;

        class AppTray extends Tray {
        constructor(iconPath, mainWindow) {

        this.mainWindow = mainWindow;

        this.on(‘right-click’, this.onRightClick.bind(this));

        onRightClick() {
        const menuConfig = Menu.buildFromTemplate([
        label: ‘Quit’,
        click: () => app.quit()

        // In particular, the following function does not
        // have auto-completion in the popup, i.e. typing
        // ‘this.pop’ does not have auto-completion. But
        // we can traverse to its declaration in the file
        // ‘electron.d.ts’.

        module.exports = AppTray;

  28. Zack says:

    When trying to debug after setting up as this doc describes, the process closes with this error:

    “core/node_modules/.bin/electron –debug-brk=54135 –expose_debug_as=v8debug core/main.js –remote-debugging-port=9222

    Process finished with exit code 130 (interrupted by signal 2: SIGINT)”

    When Run instead of Debug, the app stays open like usual until manual close.

    In either case, when main.js is running, breakpoints do not hit.

    Any idea what could be going wrong?

  29. Hans Permana says:

    Hi Ekaterina,

    I tried following your instruction to setup a renderer debugger and failed. Here is my configuration:
    Node interpreter: C:\Projects\edop-studio\node_modules\.bin\electron.cmd
    Node parameters: –remote-debugging-port=9222
    Working directory: C:\Projects\dedop-studio
    Application parameters: app –config=dedop-config.js

    I have placed a few breakpoints but all of them were ignored. Note that I am using TS. I have set “inlineSources” and “sourceMap” in tsconfig.json to true.

    This issue is probably similar to the one posted here

    Any help would be much appreciated.

  30. Abelardo says:

    I would like to know if a “hello world” tutorial is available from scratch: setting with Electron libraries until we are able to run our first Electron app made thanks to WebStorm.

    Any help would be welcome.

    Thanks and kindest regards,

  31. sebi says:


    I tried debugging the electron-quickstart but the debugger of the main process do not stop at my breakpoints.

    Idea 2017.2.4
    Electron 1.8.0

    Do you have the same problem?
    Please see the Console output with configuration –inspect

    C:\Projects\electron-quick-start\node_modules\.bin\electron.cmd --inspect-brk=51884 . C:\Projects\electron-quick-start\main.js
    Debugger listening on ws://
    For help see
    Debugger attached.

    Process finished with exit code 0

    Without configuration –inspect

    "C:\Program Files\JetBrains\IntelliJ IDEA 2017.2.1\bin\runnerw.exe" C:\Projects \electron-quick-start\node_modules\.bin\electron.cmd --debug-brk=51950 --expose_debug_as=v8debug C:\Projekte\Alarmmonitor\electron-quick-start\main.js

    Process finished with exit code 0

    Thanks Sebi

    • Ekaterina Prigara says:


      We were able to debug the app when using Electron 1.7 in WebStorm/IntelliJ IDEA 2017.3 EAP and in WebStorm/IntelliJ IDEA 2017.2.4 (you need to add --inspect as an application parameter in the run/debug configuration.

      We tried debugging with Electron 1.8 beta, but no luck. It didn’t work in VS Code as well. We should investigate further to find out whether the issue is on the Electron side or on the IDE side.

Leave a Reply

Your email address will not be published. Required fields are marked *