Debugging in DevTools

By default, devtools only shows logs from the renderer process. In order to debug the main process, we have to explicitly call electron using the --inspect flag. We have already set up a command to include the flag (i.e. yarn start-debug). The only thing left to do is setup a debugger. The easiest way is to use Chrome; the steps are detailed below.

1. Open Chrome and navigate to chrome://inspect
2. Click "Open dedicated DevTools for Node"
3. Click "Add connection"
4. Type in localhost:5858 and click "Add"
5. From the root directory, run yarn start-debug
6. Return to the Node DevTools window and you should see output in the Console tab

It is best to use yarn watch-main-dev and yarn watch-electron-dev while debugging because source code is not minified, there are optimizations, and source map is not generated in non-dev targets.

Debugging in WebStorm

We can do the same as above, but in WebStorm

1. Add a new build configuration
2. Press +
3. Choose "Attach to Node.js/Chrome"
4. Give it a name and set it to port 5858
5. Click "Ok"
6. Select the configuration and press the "Debug" button

Viewing main process output after app has been packaged

MacOS

1. Run the appropriate commands (i.e. yarn build > yarn dist)
2. From the project root directory: cd dist/mac/Knowledge\ Canvas.app/Contents
3. Run ./MacOS/Knowledge\ Canvas

Note that this must be run from the Contents folder

Viewing main process output after app has been installed

The only difference between this and the above is where the Contents folder is located. In most cases, you must run the command from /Applications/Knowledge Canvas.app/Contents