{
  "name": "app-debugging",
  "title": "Debugging a Deployed App",
  "description": "Debug a deployed app: inspect pages, capture screenshots, read function logs, and call functions directly",
  "guid": "sk_plat_dbug",
  "category": "App development",
  "requiredTools": [],
  "content": "# Debugging a Deployed App\n\nAfter every `gipity deploy`, verify the result - don't assume it worked. The deploy → **inspect** → fix loop is how you catch a blank page, a 500, or a broken asset before the user does. These commands are the inspect half.\n\n## `gipity page-inspect <url>` - is the page healthy?\n\nThe first thing to run after a deploy. Loads the page in a real browser and reports what's wrong:\n\n```bash\ngipity page-inspect https://dev.gipity.ai/<account>/<project>/\n```\n\nOutput:\n- **Title, element count, page weight** - a near-empty element count means the page didn't render\n- **Timing** - TTFB, DOM ready, load\n- **Console** - every console message the page logged; JS errors show up here\n- **Failed resources** - requests that 404'd or timed out (broken `src`/`href`, missing assets)\n\n| Flag | Effect |\n|---|---|\n| `--all` | Also report render-blocking resources, files >100KB, oversized images, and LCP detail |\n| `--wait <ms>` | Settle time after DOMContentLoaded before capturing (default 500) - raise it for late async work |\n| `--no-truncate` | Show full URLs instead of middle-ellipsis |\n| `--json` | Machine-readable output |\n\n**Diagnosing a blank or broken page:** check **Console** for the JS error and **Failed resources** for anything that didn't load. A wrong asset path or an uncaught exception is almost always one of those two.\n\n## `gipity page-screenshot <url>` - what does it actually look like?\n\nCaptures a PNG (saved as `ss-<host>-NNN.png` in the current directory):\n\n```bash\ngipity page-screenshot https://dev.gipity.ai/<account>/<project>/\ngipity page-screenshot <url> --full                 # whole scrollable page\ngipity page-screenshot <url> --device mobile,desktop # one load, multiple viewports\n```\n\n| Flag | Effect |\n|---|---|\n| `--full` | Capture the full scrollable page (default: viewport only) |\n| `--device <names>` | Viewport presets: `default`, `desktop`, `laptop`, `tablet`, `mobile` (comma-separated) |\n| `--viewport <WxH[@dpr]>` | Raw viewport, e.g. `414x896@2` |\n| `-o <file>` | Output filename (single viewport only) |\n| `--post-load-delay <ms>` | Delay after load before capture (default 1000) |\n| `--json` | Output metadata (page title, status, performance) instead of a summary |\n\nUse `--device mobile,tablet,desktop` to check responsive layout in one shot.\n\n## `gipity logs fn <name>` - why did a function fail?\n\nWhen a function returns a 500 or wrong data, read its execution logs:\n\n```bash\ngipity logs fn get-weather            # recent runs\ngipity logs fn get-weather --limit 50\n```\n\nEach entry shows time, status (`success` / `error`), duration, trigger type, and the **error message** for failed runs. `gipity fn logs <name>` is the equivalent under the `fn` command group.\n\n## `gipity fn call <name> [body]` - test a function directly\n\nInvoke a deployed function from the CLI, bypassing the frontend - the fastest way to confirm a fix:\n\n```bash\ngipity fn call get-weather '{\"zip\": \"90210\"}'\ngipity fn call get-weather --data '{\"zip\": \"90210\"}'\n```\n\nIt prints the function's JSON response. `gipity fn list` shows every deployed function with its version and auth level.\n\n## A debugging pass\n\n1. `gipity page-inspect <url>` - console clean? resources all loading?\n2. Console shows a JS error → fix the frontend code, redeploy.\n3. A `fetch` to your own function failing → `gipity logs fn <name>` for the server-side error.\n4. Reproduce and confirm the function fix with `gipity fn call`.\n5. `gipity page-screenshot --device mobile,desktop` - looks right everywhere?\n\n## Related skills\n\n- [deploy](deploy.md) - the deploy step that precedes every inspect\n- [app-development](app-development.md) - writing and testing the functions you're debugging\n- [web-app-basics](web-app-basics.md) - frontend patterns and common page bugs\n"
}