diff --git a/.vscode/launch.json b/.vscode/launch.json index 213cfc8..728d59c 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,32 +5,42 @@ "version": "0.2.0", "configurations": [ { - "name": "Electron Main Renderer", + "name": "Renderer", + "type": "chrome", + "request": "attach", + "port": 9876, + "url": "http://localhost:4200", + "sourceMaps": true, + "timeout": 10000, + "trace": "verbose", + "sourceMapPathOverrides": { + "webpack:///./*": "${workspaceFolder}/*" + }, + "preLaunchTask": "Build.Renderer" + }, + { + "name": "Main", "type": "node", "request": "launch", "protocol": "inspector", - // Prelaunch task compiles main.ts for Electron & starts Angular dev server. - "preLaunchTask": "Build.All", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", + "trace": "verbose", "runtimeArgs": [ "--serve", ".", - "--remote-debugging-port=9222" + "--remote-debugging-port=9876" ], "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" - } - }, { - "name": "Karma Attach Chrome", - "type": "chrome", - "request": "attach", - "port": 9222, - "webRoot": "${workspaceFolder}/", - "sourceMaps": true, - "timeout": 30000, - "trace": true + }, + "preLaunchTask": "Build.Main" + } + ], + "compounds": [ + { + "name": "Application Debug", + "configurations": [ "Renderer", "Main" ] } - ] } \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 6149711..374d5ac 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -2,9 +2,31 @@ "version": "2.0.0", "tasks": [ { - "label": "Build.All", + "label": "Build.Main", "type": "shell", - "command": "npm run electron:serve-tsc && ng serve", + "command": "npm run electron:serve-tsc", + "isBackground": false, + "group": { + "kind": "build", + "isDefault": true + }, + "problemMatcher": { + "owner": "typescript", + "source": "ts", + "applyTo": "closedDocuments", + "fileLocation": ["relative", "${cwd}"], + "pattern": "$tsc", + "background": { + "activeOnStart": true, + "beginsPattern": "^.*", + "endsPattern": "^.*Terminal will be reused by tasks, press any key to close it.*" + } + } + }, + { + "label": "Build.Renderer", + "type": "shell", + "command": "npm run ng:serve", "isBackground": true, "group": { "kind": "build", diff --git a/README.md b/README.md index 0e5cd1e..485412c 100644 --- a/README.md +++ b/README.md @@ -94,6 +94,16 @@ Maybe you only want to execute the application in the browser with hot reload? J YES! You can do it! Just by importing your library in npm dependencies section (not **devDependencies**) with `npm install --save`. It will be loaded by electron during build phase and added to your final package. Then use your library by importing it in `main.ts` file. Quite simple, isn't it? +## Debug with VsCode + +[VsCode](https://code.visualstudio.com/) debug configuration is available! In order to use it, you need the extension [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome). + +Then set some breakpoints in your application's source code. + +Finally from VsCode press **Ctrl+Shift+D** and select **Application Debug** and press **F5**. + +Please note that Hot reload is only available in Renderer process. + ## E2E Testing E2E Test scripts can be found in `e2e` folder.