[Dev] Improve debugging & launching (#887)

* Allow vite build --watch without app launch * Use default frontend dev URL in env example * Fix regression in yarn start * Add native vscode debugging and build watch tasks * Update README with new debugging and build info * Fix app won't start in vscode debugger
Comfy-Org · Feb 11, 2025 · c9751d4 · c9751d4
1 parent 30288b8
commit c9751d4
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 24 deletions.
diff --git a/.env_example b/.env_example
@@ -11,7 +11,7 @@ USE_EXTERNAL_SERVER=false
 # You can attach your own ComfyUI instance to the frontend dev server as well.
 # Run `npm run dev` in the frontend repo(https://github.com/Comfy-Org/ComfyUI_frontend)
 # to start a development server.
-DEV_SERVER_URL=http://192.168.2.20:5173
+DEV_SERVER_URL=http://localhost:5173
 
 # When DEV_SERVER_URL is set, whether to automatically open dev tools on app start.
 DEV_TOOLS_AUTO=false

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -2,20 +2,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Main Process",
       "type": "node",
-      "request": "attach",
-      "port": 9223,
-      "cwd": "${workspaceFolder}",
-      "outputCapture": "std",
-      "sourceMaps": true,
-      "resolveSourceMapLocations": [
-        "${workspaceFolder}/src/**",
-        "${workspaceFolder}/.vite/**",
-        "!**/node_modules/**"
-      ],
-      "preLaunchTask": "Start Vite Dev Server",
+      "request": "launch",
+      "name": "Electron: Main",
       "autoAttachChildProcesses": true,
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "runtimeArgs": ["--remote-debugging-port=9223", "."],
       "env": {
         "ELECTRON_ENABLE_LOGGING": "true",
         "ELECTRON_ENABLE_STACK_DUMPING": "true",
@@ -24,7 +19,16 @@
       "outFiles": [
         "${workspaceFolder}/.vite/**/*.js",
         "${workspaceFolder}/.vite/**/*.js.map"
-      ]
+      ],
+      "outputCapture": "std"
+    },
+    {
+      "name": "Electron: Renderer",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9223,
+      "webRoot": "${workspaceFolder}",
+      "timeout": 30000
     }
   ]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -1,24 +1,82 @@
 {
   "version": "2.0.0",
   "tasks": [
+    // Build tasks
     {
-      "label": "Start Vite Dev Server",
+      "label": "Start Vite Build Watchers",
+      "dependsOn": ["Vite Watch - Main", "Vite Watch - Preload"],
+      "group": {
+        "kind": "build"
+        // "isDefault": true
+      }
+    },
+    // Vite watchers
+    {
+      "label": "Vite Watch - Main",
       "type": "shell",
-      "command": "yarn start",
+      "command": "yarn vite build --watch",
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": ".*"
+        },
+        "background": {
+          "activeOnStart": true,
+          // Detect build start/stop
+          "beginsPattern": ".*",
+          "endsPattern": "^built in "
+        }
+      }
+    },
+    {
+      "label": "Vite Watch - Preload",
+      "type": "shell",
+      "command": "yarn vite build --watch --config vite.preload.config.ts",
       "linux": {
         "options": { "shell": { "args": ["-ci"] } }
       },
       "isBackground": true,
       "problemMatcher": {
         "pattern": {
-          "regexp": "^.*$"
+          "regexp": ".*"
         },
         "background": {
           "activeOnStart": true,
           "beginsPattern": ".*",
-          "endsPattern": "Debugger listening on"
+          "endsPattern": "^built in "
         }
       }
+    },
+
+    // Terminate tasks (for automation)
+    {
+      "label": "Terminate Vite Watchers",
+      "dependsOn": ["Terminate Main Watcher", "Terminate Preload Watcher"],
+      "problemMatcher": []
+    },
+    {
+      "label": "Terminate Main Watcher",
+      "command": "echo ${input:terminateMainWatcher}",
+      "type": "shell"
+    },
+    {
+      "label": "Terminate Preload Watcher",
+      "command": "echo ${input:terminatePreloadWatcher}",
+      "type": "shell"
+    }
+  ],
+  "inputs": [
+    {
+      "id": "terminateMainWatcher",
+      "type": "command",
+      "command": "workbench.action.tasks.terminate",
+      "args": "Vite Watch - Main"
+    },
+    {
+      "id": "terminatePreloadWatcher",
+      "type": "command",
+      "command": "workbench.action.tasks.terminate",
+      "args": "Vite Watch - Preload"
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -172,7 +172,7 @@ First, initialize the application resources by running `yarn make:assets`:
 
 This command will install ComfyUI and ComfyUI-Manager under `assets/`. The exact versions of each package is defined in `package.json`.
 
-You can then run `start` to build/launch the code and a live buildserver that will automatically rebuild the code on any changes:
+You can then run `start` to build and launch the app. A watcher will also be started; it will automatically rebuild the app when a source file is changed:
 
 ```bash
 deactivate # Deactivate your existing python env to avoid influencing the
@@ -251,9 +251,11 @@ apt-get install libnss3
 
 ### Debugger
 
-There are helpful debug launch scripts for VSCode / Cursor under `.vscode/launch.json`. It will start the dev server as defined in `.vscode/tasks.json`. Then attach the debugger.
+There are helpful debug launch scripts for VSCode / Cursor under `.vscode/launch.json`. The default launch script runs the Electron launcher in the project root and attaches the debugger. By default, the app is not built when this is used.
 
-This can be used simply by pressing `F5` in VSCode or VSCode derivative.
+The default launch script can be run by pressing `F5` in VSCode or VSCode derivative. `Ctrl + Shift + F5` restarts the app with the debugger attached. `Shift + F5` terminates the debugger and the process tree it is attached to.
+
+To keep the app built and up to date as you make changes, run the `Start Vite Build Watchers` build task defined in `.vscode/tasks.json`. This spawns two watcher tasks - one for the main app, and one for the preload script. These watchers will automatically rebuild the app when a source file is changed.
 
 The launch environment can be customised, e.g. add a `"linux"` section to source your `~/.profile` (and other interactive config) when debugging in linux:
 

diff --git a/infrastructure/viteElectronAppPlugin.ts b/infrastructure/viteElectronAppPlugin.ts
@@ -1,6 +1,6 @@
 import electronPath from 'electron';
 import { type ChildProcess, spawn } from 'node:child_process';
-import type { PluginOption } from 'vite';
+import type { PluginOption, UserConfig } from 'vite';
 
 /**
  * Loads the electron app whenever vite is loaded in watch mode.
@@ -17,10 +17,14 @@ export function viteElectronAppPlugin(): PluginOption {
   };
 
   let electronApp: ChildProcess | null = null;
+  let mode: string | undefined;
 
   return {
     name: 'Load Electron app in watch mode',
     apply: 'build',
+    config(config: UserConfig) {
+      mode = config.mode;
+    },
     buildStart() {
       // Only operate in watch mode.
       if (this.meta.watchMode !== true || !electronApp) return;
@@ -31,7 +35,7 @@ export function viteElectronAppPlugin(): PluginOption {
     },
     closeBundle() {
       // Only operate in watch mode.
-      if (this.meta.watchMode === true) startApp();
+      if (this.meta.watchMode === true && mode === 'startwatch') startApp();
     },
   };
 }
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "publish:staging": "yarn run vite:compile && todesktop build --config=./todesktop.staging.json --async",
     "reset-install": "node scripts/resetInstall.js",
     "sign": "node debug/sign.js",
-    "start": "vite build --config vite.preload.config.ts && vite build --watch",
+    "start": "vite build --config vite.preload.config.ts && vite build --watch --mode startwatch",
     "test:e2e": "npx playwright test",
     "test:unit": "vitest run",
     "test:update-snapshots": "npx playwright test --update-snapshots",

diff --git a/src/shell/terminal.ts b/src/shell/terminal.ts
@@ -54,9 +54,16 @@ export class Terminal {
 
   #createPty() {
     const window = this.window;
+    // node-pty hangs when debugging - fallback to winpty
+    // https://github.com/microsoft/node-pty/issues/490
+
+    // Alternativelsy, insert a 500-1000ms timeout before the connect call:
+    // node-pty/lib/windowsPtyAgent.js#L112
+    const debugging = process.env.NODE_DEBUG === 'true';
     // TODO: does this want to be a setting?
     const shell = getDefaultShell();
     const instance = pty.spawn(shell, [], {
+      useConpty: !debugging,
       handleFlowControl: false,
       conptyInheritCursor: false,
       name: 'xterm',