chore(dev): Add VS Code/Cursor debugging setup (#525)

Co-authored-by: Charles Vien <charles.v@posthog.com>

Author: Twixes

.gitignore

@@ -14,7 +14,9 @@ out/
 .env.local
 
 # IDE
-.vscode/
+.vscode/*
+!.vscode/launch.json
+!.vscode/tasks.json
 .idea/
 *.swp
 *.swo
@@ -38,4 +40,4 @@ AGENTS.md
 .envrc
 
 # Session store used for example-client.ts
-.session-store.json
+.session-store.json

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Array (Main Process)",
+      "type": "node",
+      "request": "attach",
+      "port": 5858,
+      "restart": true,
+      "timeout": 60000,
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMaps": true,
+      "address": "127.0.0.1",
+      "localRoot": "${workspaceFolder}",
+      "remoteRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "Debug Array (Renderer Process)",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9222,
+      "webRoot": "${workspaceFolder}/apps/array",
+      "timeout": 60000,
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///./*": "${webRoot}/*",
+        "webpack:///src/*": "${webRoot}/src/*",
+        "webpack:///*": "*",
+        "webpack:///./~/*": "${webRoot}/node_modules/*"
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug Array (Main + Renderer)",
+      "configurations": [
+        "Debug Array (Main Process)",
+        "Debug Array (Renderer Process)"
+      ],
+      "preLaunchTask": "start-dev-with-debug",
+      "stopAll": true
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,79 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build-electron-trpc",
+      "type": "shell",
+      "command": "pnpm --filter @posthog/electron-trpc build",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "start-agent-watch",
+      "type": "shell",
+      "command": "pnpm --filter agent dev",
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": "^.*$",
+          "file": 1,
+          "location": 2,
+          "message": 3
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*Watching for changes.*",
+          "endsPattern": ".*Build success.*"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "group": "agent"
+      }
+    },
+    {
+      "label": "start-electron-with-debug",
+      "type": "shell",
+      "command": "pnpm --filter array start:debug",
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": "^.*$",
+          "file": 1,
+          "location": 2,
+          "message": 3
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*Launched Electron app.*|.*Launching Vite dev servers.*",
+          "endsPattern": ".*"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "group": "array"
+      },
+      "options": {
+        "env": {
+          "NODE_ENV": "development",
+          "ELECTRON_ENABLE_LOGGING": "1"
+        }
+      }
+    },
+    {
+      "label": "start-dev-with-debug",
+      "dependsOn": [
+        "build-electron-trpc",
+        "start-agent-watch",
+        "start-electron-with-debug"
+      ],
+      "dependsOrder": "sequence",
+      "problemMatcher": []
+    }
+  ]
+}

apps/twig/package.json

@@ -12,6 +12,7 @@
     "setup": "bash bin/setup",
     "dev": "electron-forge start",
     "start": "electron-forge start",
+    "start:debug": "electron-forge start -- --inspect=5858 --remote-debugging-port=9222",
     "package": "electron-forge package",
     "package:dev": "FORCE_DEV_MODE=1 SKIP_NOTARIZE=1 electron-forge package",
     "make": "electron-forge make",

apps/twig/src/main/index.ts

@@ -138,6 +138,8 @@ function setupExternalLinkHandlers(window: BrowserWindow): void {
 }
 
 function createWindow(): void {
+  const isDev = !app.isPackaged;
+
   mainWindow = new BrowserWindow({
     width: 900,
     height: 600,
@@ -152,6 +154,8 @@ function createWindow(): void {
       preload: path.join(__dirname, "preload.js"),
       enableBlinkFeatures: "GetDisplayMedia",
       partition: "persist:main",
+      // Enable remote debugging in development for Chrome DevTools
+      ...(isDev && { webSecurity: false }),
     },
   });