Element capture

Point at the element. Keep its HTML and CSS.

Before the screenshot, the reporter can click the node that broke. BugTrap stores a selector, the HTML, the styles that differ from a plain element of the same tag, and the CSS rules that matched. On the bug, that capture sits beside the screenshot.

On the ticket

An inspector, attached to the report.

They can skip the picker. A report can be a screenshot, a replay, and a note. When they do pick a node, the bug has enough to find it in the code.

  • A selector for that node

    BugTrap prefers a unique id. Otherwise it builds a short path from the tag and a couple of classes, and adds :nth-child when siblings would match the same path.

  • The HTML

    The element’s markup is stored with the bug. Very long markup is shortened, and the ticket says when it was cut.

  • Styles that actually differ

    Computed styles are compared with an empty element of the same tag. What comes back are the properties that differ, up to 200 of them.

  • The rules that matched

    Up to 40 CSS rules the page is allowed to read, including adopted stylesheets and the shadow root that holds the element. The bug shows them next to the computed values.

On the $5 plan

The element comes with the $5 plan.

Selector, HTML, computed styles, and matching CSS rules are on every workspace. An agent that reads the bug through MCP receives that HTML and CSS. The screenshot and the replay stay on the bug page.

How MCP reads a bug

BugTrap

$5 a month for the workspace. The team is included.

Screenshot, markup, element HTML and CSS, replay, diagnostics, guest reports, Asana, and MCP come with that price.