Continue polishing debug configurations

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

.vscode/launch.json

@@ -9,13 +9,27 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
+            "protocol": "inspector",
+            "preLaunchTask": "compile-dev",
             "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
             "windows": {
               "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
             },
-            "args" : ["."],
+            "runtimeArgs": [
+                "--remote-debugging-port=9223",
+                "--inspect",
+                "."
+            ],
             "outputCapture": "std"
         },
+        {
+            "name": "Renderer Process",
+            "type": "pwa-chrome",
+            "request": "attach",
+            "port": 9223,
+            "webRoot": "${workspaceFolder}",
+            "timeout": 30000
+        },
         {
             "name": "Integration Tests",
             "type": "node",
@@ -23,5 +37,5 @@
             "console": "externalTerminal",
             "runtimeArgs": ["${workspaceRoot}/node_modules/.bin/jest", "--runInBand", "integration"],
         },
-    ]
+    ],
 }

.vscode/tasks.json

@@ -0,0 +1,40 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "shell",
+            "label": "dev-server-renderer",
+            "group": "build",
+            "command": "yarn",
+            "args": [
+                "run",
+                "dev:renderer",
+                "&"
+            ],
+            "isBackground": true,
+            "problemMatcher": {
+                "background": {
+                    "activeOnStart": false,
+                    "beginsPattern": "Compiling\\.\\.\\.$",
+                    "endsPattern": "^No issues found\\.$"
+                }
+            }
+        },
+        {
+            "type": "shell",
+            "group": "build",
+            "command": "yarn",
+            "args": [
+                "debug-build"
+            ],
+            "problemMatcher": [],
+            // "dependsOn": [
+            //     "dev-server-renderer"
+            // ],
+            "label": "compile-dev",
+            "detail": "Compiles main and extension types"
+        }
+    ]
+}

package.json

@@ -13,7 +13,8 @@
   "scripts": {
     "dev": "concurrently -k \"yarn run dev-run -C\" yarn:dev:*",
     "dev-build": "concurrently yarn:compile:*",
-    "dev-run": "nodemon --watch static/build/main.js --exec \"electron --inspect .\"",
+    "debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
+    "dev-run": "nodemon --watch static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
     "dev:main": "yarn run compile:main --watch",
     "dev:renderer": "yarn run webpack-dev-server --config webpack.renderer.ts",
     "dev:extension-types": "yarn run compile:extension-types --watch --progress",
@@ -196,6 +197,7 @@
     "conf": "^7.0.1",
     "crypto-js": "^4.0.0",
     "electron-devtools-installer": "^3.1.1",
+    "electron-is-dev": "^2.0.0",
     "electron-updater": "^4.3.1",
     "electron-window-state": "^5.0.3",
     "filenamify": "^4.1.0",

src/renderer/bootstrap.tsx

@@ -1,6 +1,7 @@
 import "./components/app.scss";
 
 import React from "react";
+import { remote } from "electron";
 import * as Mobx from "mobx";
 import * as MobxReact from "mobx-react";
 import * as ReactRouter from "react-router";
@@ -19,6 +20,17 @@ import { App } from "./components/app";
 import { LensApp } from "./lens-app";
 import { themeStore } from "./theme.store";
 
+/**
+ * If this is a development buid, wait a second to attach
+ * Chrome Debugger to renderer process
+ * https://stackoverflow.com/questions/52844870/debugging-electron-renderer-process-with-vscode
+ */
+async function attachChromeDebugger() {
+  if (remote.process.defaultApp) {
+    await new Promise(r => setTimeout(r, 1000));
+  }
+}
+
 type AppComponent = React.ComponentType & {
   init?(): Promise<void>;
 };
@@ -75,3 +87,4 @@ export async function bootstrap(App: AppComponent) {
 
 // run
 bootstrap(process.isMainFrame ? LensApp : App);
+attachChromeDebugger();