ggt debugger

Author: infiton

.changeset/add-debugger.md

@@ -0,0 +1,9 @@
+---
+ggt: minor
+---
+
+Add `ggt debugger` command.
+
+- Debug Gadget via CDP on `localhost:9229` through `ggt`.
+- `--configure vscode` prepares a VS Code launch configuration and task.
+- Use inside an app directory initialized with `ggt dev`; run `ggt debugger` as a background task and attach your IDE to `localhost:9229`.

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install dependencies
@@ -38,7 +38,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install dependencies
@@ -59,6 +59,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
+        node: [20]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout repository
@@ -70,7 +71,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ matrix.node }}
           cache: pnpm
 
       - name: Install dependencies

nix/flake.nix

@@ -19,7 +19,7 @@
           mkcert = pkgs.mkcert;
           nix-direnv = pkgs.nix-direnv;
           nixpkgs-fmt = pkgs.nixpkgs-fmt;
-          nodejs = pkgs.nodejs-18_x;
+          nodejs = pkgs.nodejs_20;
           yarn = pkgs.yarn.override { nodejs = flake.packages.nodejs; };
 
           ggt = pkgs.writeShellScriptBin "ggt" ''

package.json

@@ -62,6 +62,7 @@
     "@types/pluralize": "^0.0.33",
     "@types/semver": "^7.5.8",
     "@types/set-cookie-parser": "^2.4.10",
+    "@types/tcp-port-used": "^1.0.0",
     "@types/which": "^3.0.4",
     "@types/ws": "^8.5.14",
     "@typescript-eslint/eslint-plugin": "^8.11.0",
@@ -127,6 +128,7 @@
     "stdin-discarder": "^0.2.2",
     "string-width": "^7.2.0",
     "strip-ansi": "^7.1.0",
+    "tcp-port-used": "^1.0.2",
     "terminal-link": "^4.0.0",
     "ts-dedent": "^2.2.0",
     "ts-node": "^10.9.2",
@@ -140,6 +142,6 @@
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   }
 }

pnpm-lock.yaml

@@ -17,21 +17,25 @@ export const testApp: Application = Object.freeze({
       id: 1n,
       name: "development",
       type: EnvironmentType.Development,
+      nodeVersion: "22.15.0",
     },
     {
       id: 2n,
       name: "production",
       type: EnvironmentType.Production,
+      nodeVersion: "22.15.0",
     },
     {
       id: 3n,
       name: "cool-environment-development",
       type: EnvironmentType.Development,
+      nodeVersion: "22.15.0",
     },
     {
       id: 4n,
       name: "other-environment-development",
       type: EnvironmentType.Development,
+      nodeVersion: "22.15.0",
     },
   ],
   team: {

spec/__support__/app.ts

@@ -112,6 +112,66 @@ Usage
 "
 `;
 
+exports[`root > when debugger is given > prints the usage when --help is passed 1`] = `
+"Start a Chrome DevTools Protocol proxy server that connects to the Gadget debugger.
+This allows you to debug your Gadget app using VS Code, Chrome DevTools, or any other
+CDP-compatible debugger client.
+
+Usage
+      $ ggt debugger [DIRECTORY] [options]
+
+      DIRECTORY: The directory containing your Gadget app (default: current directory)
+
+Options
+      -e, --env <env_name>        Selects the environment to debug. Default set on ".gadget/sync.json"
+      -p, --port <port>           Local port for the inspector proxy (default: 9229)
+      --configure <editor>        Configure debugger for vscode, cursor
+
+Examples
+      start debugger proxy for current environment
+      $ ggt debugger
+
+      use a custom port
+      $ ggt debugger --port 9230
+
+      debug a specific app and environment
+      $ ggt debugger --app myApp --env development
+
+      configure VS Code debugger
+      $ ggt debugger --configure vscode
+"
+`;
+
+exports[`root > when debugger is given > prints the usage when -h is passed 1`] = `
+"Start a Chrome DevTools Protocol proxy server that connects to the Gadget debugger.
+This allows you to debug your Gadget app using VS Code, Chrome DevTools, or any other
+CDP-compatible debugger client.
+
+Usage
+      $ ggt debugger [DIRECTORY] [options]
+
+      DIRECTORY: The directory containing your Gadget app (default: current directory)
+
+Options
+      -e, --env <env_name>        Selects the environment to debug. Default set on ".gadget/sync.json"
+      -p, --port <port>           Local port for the inspector proxy (default: 9229)
+      --configure <editor>        Configure debugger for vscode, cursor
+
+Examples
+      start debugger proxy for current environment
+      $ ggt debugger
+
+      use a custom port
+      $ ggt debugger --port 9230
+
+      debug a specific app and environment
+      $ ggt debugger --app myApp --env development
+
+      configure VS Code debugger
+      $ ggt debugger --configure vscode
+"
+`;
+
 exports[`root > when deploy is given > prints the usage when --help is passed 1`] = `
 "Deploys your app to production.