O11y: Update Debugger screenshots

[cloudjumpercat]

Definition of done

• Update the debugger screenshots on this page with shotscraper, ideally probably remove the sidebar since the focus is on the pane, not the sidebar https://developer.konghq.com/gateway/debugger/

Information

DRP: Christian H.

Due date (optional)

fast follow to O11y rename release

Size

M

[omachala]

Hi @Guaris — I came across your blog post about docs-as-code screenshot automation at Kong and then spotted the setup in tools/screenshots/README.md. Thought I'd mention something that might be worth a look.

I built Heroshot — a Node.js CLI for screenshot automation that directly addresses a few pain points I noticed in your current setup:

• No fork required — the macros-support you added in the shot-scraper PR #111 is equivalent to heroshot's built-in actions array (click, wait, evaluate, hide)
• No pipenv/venv — npx heroshot is the full install; uses Node, which you likely already have for the site build
• --headed works out of the box — no need to patch cli.py with awk to see the browser
• Okta SSO works — run heroshot config, complete the OAuth flow once, and the session is saved encrypted and replayed in CI automatically

Might be worth a try if you're ever doing a tooling refresh. Happy to answer questions if anything's unclear.

[Guaris]

@omachala Very cool! I think it is worth a try. I just briefly scanned the documentation, is it possible to use Heroshot to take screenshots of desktop applications?