diff --git a/.babelrc b/.babelrc index b00b3d6..f9e1d60 100644 --- a/.babelrc +++ b/.babelrc @@ -1 +1 @@ -{ "presets": ["es2015", "react"] } +{ "presets": ["@babel/preset-env", "@babel/preset-react"] } diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..6fd5854 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,40 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Electron: Main", + "type": "node", + "request": "launch", + "cwd": "${workspaceRoot}", + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", + "runtimeArgs": [ + "-r", + "@babel/register", + "--remote-debugging-port=9223", + "." + ], + "windows": { + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd", + }, + "program": "${workspaceRoot}/main.js", + "protocol": "inspector" + }, + { + "name": "Electron: Renderer", + "type": "chrome", + "request": "attach", + "port": 9223, + "webRoot": "${workspaceFolder}/views", + "timeout": 30000 + } + ], + "compounds": [ + { + "name": "Electron: All", + "configurations": [ + "Electron: Main", + "Electron: Renderer" + ] + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 0424cf1..d9b8402 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,23 @@ npm install npm start ``` +## Debugging + +### With Chrome Developer Tools + +- `npm run brk`; +- Open `chrome://inspect` in Chrome Browser; +- Press "Configure" button and add `localhost:5858`; +- Then look to Remote Target section, there must applications link appears. Click it. This opens chrome developer tools; +- In Dev Tools go to `Sources` tab and `Add (source) folder to workspace`. Add breakpoint and F8 (continue execution). + +### Vith Visual Studio Code + +Debug config `.vscode/launch.json` is taken from [vscode-recipes](https://github.com/Microsoft/vscode-recipes/tree/master/Electron). + +Electron application has main and rendering processes. Main executed in node environment and rendering - in browser. So there are two debug configurations in Debug panel (Ctrl+Shift+D) respectively: `Electron: Main` and `Electron: Renderer`. You can run Main and then attach Renderer or you can run both by choosing `Electron: All` compound. + + [ES6]: http://exploringjs.com/ [React]: https://facebook.github.io/react/ [Electron]: http://electron.atom.io/ diff --git a/index.html b/index.html index f6535ad..291b160 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@