WhereFrom: API Data Inspector

When a page looks wrong, the first question is where the fault is: in the data from the API, or in how the page was built from its design. WhereFrom answers both, right on the page. Trace any value to its API. Enable WhereFrom on your site, click a value, and the panel shows: - the request the value came from, with its parameters and, for GraphQL, the operation - the exact field, such as items[1].unitPrice - the raw value next to the value on the page, and how it was changed: cents to a currency amount, a raw date to a readable one, changed letter case - the part of the response around the field Check the page against its Figma design, element by element: - Connect your Figma account once, then paste a link from Dev Mode or browse your teams, files, and frames. - WhereFrom finds the frame on your page and checks every element: text, type, colors, spacing, borders, corners, shadows, sizes, and positions. - Go through the elements one at a time. The page outlines each one and says what differs, and the panel shows the design value next to the page value, the Figma style name, and the CSS that fixes it. - Text that comes from your API is recognized as live data, so the sample text of the design is not reported as a bug. - Lay the design over the page in normal, difference, or swipe view. Copy a report, or save a screenshot with the differences numbered. It also catches data bugs: - a date shown in local time when the UTC day is different - a value that a newer response has already replaced - a rounded number - the same request sent twice at the same moment - for a label the frontend writes from a code, such as a status, the field likely behind it, marked as a guess For testers: - Take a screenshot of the page or of an area you drag, with the value outlined and without the panel in the picture. - Record the steps to a bug as a video. Chrome asks what to record each time. - "Copy bug report" copies everything as text for your tracker: page, value, source, raw value, element details, browser, and window size. - The element details list the selector, size, font, colors, contrast, and spacing. More tools: - Type a value to find its source when you cannot click it. - Open any captured response, click a field, and see where the page shows it. - Color the whole page by source: each request gets a color, and text that comes from no API gets a dashed line. It works on any site, whatever it is built with, and needs no change to your project. It reads the data a page loads from its API and the data the server placed inside the page. The panel is available in English and Arabic. Private by design: WhereFrom has no access to any site until you enable it there. What it reads from your pages stays in your browser and is never sent anywhere. The design check talks only to the Figma API, with your own token, which stays on your computer.