WhereFrom: API & Design Inspector

Click any value to see the API response and field it came from, and check the page against its Figma design, element by element.

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 it part by part, the sidebar with the sidebar and the toolbar with the toolbar: text, type, colors, spacing, borders, corners, shadows, sizes, positions, and icons. - The page does not need the width of the design. Sizes that follow the window are not reported, and icons, logos, and charts are checked as one piece each. - Only what you can see counts: differences of 2px or less, and colors that look alike, are left out of the list and the score, unless you choose to count them. - Click a part of the page to check only that part. Go through its 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 and the Figma style name. - Copy CSS fix (Pro): get the CSS that makes an element of the page match the design. - Inspect the design without opening Figma (Pro): every layer with its CSS, as in Dev Mode, with the names of its Figma styles. Click a layer in the picture of the design or find it in the list of layers, and copy one line or all of it. - Compare on hover (Pro): point at any element of your page, and a card shows the design's value next to the page's for each property, what differs first. Click the element to open it in the inspector. - Text that comes from your API is recognized as live data, so the sample text of the design is not reported as a bug. - Screenshot report (Pro): one picture for your ticket, with each part of the design next to the same part of your page, what differs numbered on both and listed with the design's value and the page's. Copying the report as text is free. - Re-check when the page changes (Pro): the check runs again by itself while you edit the page, or when its data loads. - Lay the design over the page in normal, difference, or swipe view, or mark the differences on the page and point at one to see what differs there. 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. WhereFrom is in English and Arabic, in light or dark: it follows your system's theme, or the one you choose. Free and Pro: tracing values, screenshots, recordings, bug reports, and the design check itself, with its score, its list of differences, the marks on the page, and the overlay, are free, with no time limit. WhereFrom Pro adds the time-savers of the design check, marked "Pro" above: - Inspect the design: the CSS of every layer, as in Dev Mode, ready to copy - Copy CSS fix: the CSS that makes an element of the page match the design - Compare on hover: point at any element to see how it differs from the design - Screenshot report: one picture with every difference numbered, ready for a ticket - Re-check when the page changes: the check runs again by itself while you edit the page - All your saved checks: free keeps your 3 latest in view, Pro keeps them all Pro is free for 14 days, with no card. The days start the first time you use a Pro feature. After that it costs $8 a month, $60 a year, or $120 once, with lower prices in some countries. One key works on 3 computers. If you used WhereFrom before Pro, you get 25% off any plan for as long as you keep it: the extension shows the offer for 30 days after the update. Pro is sold by Ahmed Gamal, the developer, on his website through Paddle, which handles the payment, not by Google. Cancel a subscription at any time from "Manage subscription" in the extension. 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. With a Pro key, WhereFrom sends the key and a random ID of the installation to its license server, to check the key, and nothing else.