VSCode launch configurations for debugging (#2281)

* Add configuration for debugging integration tests

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

* Add launch configuration for debugging main process

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

* Continue polishing debug configurations

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

* Remove unnecessary dependency

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

* Add debug configuration for unit tests + cleanup vscode tasks

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

* Update src/renderer/bootstrap.tsx

Add `await` keyword to debugger attachment

Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

* Update src/renderer/bootstrap.tsx

Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

* Use existing  variable to wait for chrome debugger attachment

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

* Update src/renderer/bootstrap.tsx

Use available helper function instead of raw promise

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

* Import delay utility

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

* Move async function to async context (attaching debugger)

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

Co-authored-by: Alex Culliere <alozhkin@mirantis.com>
Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

src/renderer/bootstrap.tsx

@@ -8,7 +8,8 @@ import * as ReactRouterDom from "react-router-dom";
 import { render, unmountComponentAtNode } from "react-dom";
 import { clusterStore } from "../common/cluster-store";
 import { userStore } from "../common/user-store";
-import { isMac } from "../common/vars";
+import { delay } from "../common/utils";
+import { isMac, isDevelopment } from "../common/vars";
 import { workspaceStore } from "../common/workspace-store";
 import * as LensExtensions from "../extensions/extension-api";
 import { extensionDiscovery } from "../extensions/extension-discovery";
@@ -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 (isDevelopment) {
+    await delay(1000);
+  }
+}
+
 type AppComponent = React.ComponentType & {
   init?(): Promise<void>;
 };
@@ -35,6 +47,7 @@ export {
 export async function bootstrap(App: AppComponent) {
   const rootElem = document.getElementById("app");
 
+  await attachChromeDebugger();
   rootElem.classList.toggle("is-mac", isMac);
 
   extensionLoader.init();