# RobArt CatchNet — User Manual

RobArt CatchNet is a load-time visual-bug diagnostic. It watches your page paint during load, then **names the CSS rule** behind the problem — a FOUC flash, a layout shift, a phantom horizontal scroll, a lingering overlay — so you can fix the cause instead of chasing a score.

It runs only for logged-in administrators, on the front end. Your visitors never load it and it adds nothing to their page.

---

## Opening the panel

1. Log in as an administrator and view any page on the **front end** of your site.
2. In the admin bar at the top, click **CatchNet**.
3. The floating panel opens in the bottom-right corner.

Reload the page to record a fresh load; the panel scrubs through what happened.

---

## The verdict

At the top of the panel, **Most likely cause** is CatchNet's headline: the single rule most likely responsible, the frame it happened at, and a confidence score. When several detectors agree on the same selector, the confidence rises and the panel says how many rules agree.

## Findings

Every issue CatchNet detected, ranked by confidence. Click a finding to jump the panel to the frame where it happened. Each finding can be **dismissed** (×) if it isn't a real bug — dismissed findings stop counting toward the admin-bar badge and are remembered on this browser.

## The scrubber

Step through the recorded frames with the ◀ ▶ buttons, the slider, or the arrow keys. Each frame shows the page's state at that moment: the rendered `<html>`/`<body>`, the flags raised, and — under **Frame detail** — the winning CSS rule for each watched property.

## Reproduce a frame

The **Reproduce frame** button re-applies a recorded frame's state to the live page, so the bug visibly snaps back on screen. Click again to restore the page exactly.

## Copy report

**Copy report** puts a plain-text summary — the verdict, all findings, and the inspected frame — on your clipboard, ready to paste into a bug report or an AI chat.

## Watch list

By default CatchNet auto-detects suspicious elements each load. You can also watch a specific element:

- **Pick element** — click the button, then click any element on the page.
- **Type a selector** — enter a CSS selector and click Add.

Watched elements are recorded from the first frame of the next reload.

## See-through mode

The panel's opacity toggle (the overlapping-circles icon on the scrubber) makes the whole panel transparent so you can watch the page underneath while it stays open. Hovering the panel brings it back to readable. Set how transparent it sits at rest and how solid it becomes on hover under **Tools → CatchNet → Panel see-through**.

---

## The Visual filmstrip (Pro)

With RobArt CatchNet Pro, the **Visual** section reconstructs how the page actually *looked* at each recorded frame — a real, saveable image.

- **Snapshot frame** reconstructs the current frame.
- **Build all** reconstructs the whole strip, one frame at a time.
- Frames that carry a finding are marked, so your eye lands on the ones that matter.
- Click any thumbnail for a **big pop-out view** with prev/next arrows.
- **Export** bundles the rendered frames into a ZIP. Choose PNG or WebP under **Tools → CatchNet → Filmstrip export**.

Reconstructions are produced entirely in your browser — nothing is uploaded.

---

## Settings

Everything lives under **Tools → CatchNet**: your tier and licence, the see-through opacities, and (Pro) the export format.

## Support

Documentation and guides are at [robart-illustration.eu](https://robart-illustration.eu/plugins-wordpress-development/). Found a bug? Open a thread on the plugin's WordPress.org support forum.