misc/ vscode debug

Author: Maxime GRIS

.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" ]
         }
-        
     ]
 }

.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",

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.