The Probe Inspector is the main interface for reviewing probe results in Uiprobe.
It brings together the visual comparison canvas, detected issues, probe versions, and view controls in a single workspace, allowing you to inspect visual differences efficiently and in context.
The canvas is the central area of the Probe Inspector.
It displays the visual comparison between the Figma design and the live webpage. Markers appear on top of the canvas to indicate where visual issues are located. Selecting a marker focuses the canvas on the affected area and opens the corresponding annotation card.
The canvas responds to your interactions:
View controls are located in the top toolbar of the Probe Inspector.
They allow you to switch between different view modes, such as Web, Figma, Split, Overlay, and Diff. These modes change how the comparison is displayed on the canvas, without affecting the detected issues or probe data.
The Issues panel lists all detected issues for the selected probe version.
Issues are shown in a structured list and can include grouped issues when multiple differences occur on the same element or within the same segment.
Selecting an issue in the panel highlights the corresponding marker on the canvas and opens the related annotation card.
The Issues panel also supports filtering and collapsing issue groups, making it easier to focus on specific parts of the page.
The Versions panel allows you to navigate between different runs of the same probe.
Each version represents a snapshot of the comparison at a specific point in time. Switching versions updates:
This makes it possible to review how visual differences change as designs or implementations evolve.
The Probe Inspector is designed around synchronized interaction:
This tight coupling allows you to move fluidly between spatial inspection and structured review.
The Probe Inspector is focused on visual review.
It does not:
Its role is to make visual differences clear, navigable, and easy to inspect.
