Captures atdifferent sizesMotion and
notice controlsBuilt with Tauri
One site.Many sizes.One complete view.
An in-house tool to check the responsiveness of every project.
A desktop app that opens a site at eight screen sizes, in a real Chrome, and returns the photo and the diagnosis for each one.Opens a site in eight screen sizes and returns shots and a diagnosis.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
Captures atdifferent sizesMotion and
notice controlsBuilt with Tauri
One site.Many sizes.One complete view.
An in-house tool to check the responsiveness of every project.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
A desktop app that opens a site at eight screen sizes, in a real Chrome, and returns the photo and the diagnosis for each one.Opens a site in eight screen sizes and returns shots and a diagnosis.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
The bench
Eight screens, from phone to monitor.
Before publishing a website, you need to know how it looks on a phone, a tablet and a computer. The app opens the same site at eight real screen sizes, from the most common Android to a Full HD monitor, and shows them all side by side. Hover a device to see its size in the drawing.
The size is width × height. The "@3x" says how many times sharper the screen is than a regular computer's: that's why a text can look fine on a laptop and tiny on a phone. The four checked by default cover a phone, a tablet and two computers; the other four are one click away.
How it works
A real Chrome, at every size.
The app doesn't draw an imitation of the site: it uses the computer's own Chrome, opens the site at each device's size and photographs the whole page. Every measurement goes through four steps, and the app's screen shows which one each device is in.
Before the site loads, the window already has the width, height and screen sharpness of the chosen device.
- On phones and tablets the screen accepts touch, like the real device
- The site thinks it's on a phone (or a computer) and shows the right version
- Each device opens in its own window
Whatever changes how the page behaves is set up before it starts loading.
- Entrance animations jump straight to the end
- What would only appear on scroll is already visible
- Cookie and age notices are closed, if you ask
Many pages only load images and text when someone scrolls to them. The app scrolls the whole page, bit by bit, so everything arrives.
- Waits for the fonts and images to finish loading
- There's a time limit: a page that never ends doesn't freeze the app
- Goes back to the top before the photo
The page is photographed one screen at a time, top to bottom, and the parts become a single photo.
- Up to 40 parts per device
- After the photo, it checks whether anything spilled off the screen or stayed invisible
The app doesn't carry a browser of its own: it uses the Chrome already installed. That keeps it light, a built-in browser would add 170 to 282 MB.
The full photo
A long page, photographed in parts.
A web page is usually much taller than the screen. To photograph it whole, the app scrolls down one screen at a time, takes a photo of each piece and puts them together. That way the photo shows the site the way a visitor sees it while scrolling, including what stays pinned on screen.
The photographed parts
- Part 1Position 0 px
- Part 2Position 768 pxTop menu removed
- Part 3Position 1,536 pxTop menu removed
- Part 4Position 2,304 pxTop menu removed
The limits
- 40Parts at most, per device
- 16,384 pxThe maximum height of a photo the browser itself can take
- 220 msOf waiting on each part, so the screen settles before the photo
- 2nd part onwardThe menu pinned to the top leaves the photo, so it doesn't repeat on every part
The preparation
Without preparation, half the page disappears. With it, everything shows.
Many modern sites make each part appear with an animation when you scroll to it. For visitors, it's lovely. For an automatic photo, it's a problem: the photo is taken before the animation happens, and half the page comes out blank. That's why the app prepares the page before photographing it. Compare: the front of the slats is the photo without preparation; the back, the photo with it.
- 01No animationsThe app asks the site for its motion-free version, which many sites already offer to people bothered by animation. Content is born in place.
- 02Everything shows at onceThe parts that would only appear on scroll are released right away, and they don't vanish again.
- 03Notices closedCookie, age and welcome windows covering the site are closed automatically, if you ask.
- 04Everything loadedThe app waits for the fonts and images to finish loading.
- 05A trip down the pageThe page is scrolled to the end and back to the top, to load whatever only arrives when someone scrolls.
- 06Animations at the endAnything still moving jumps straight to its final position before the photo.
The diagnosis
Every screen comes back with a diagnosis.
Besides the photo, the app checks each screen and reports what it found. There are three warnings, with the same names the app shows, in the example, the BabyShoes store on the Full HD monitor came back with one warning.
- Sideways overflow
no horizontal overflowWarns when the page gets wider than the screen and creates that sideways scrolling nobody wants on a phone. - Invisible elements
invisible elementsWarns when a text or an image stayed transparent and never showed, and lists the first eight, to find where the problem is. - Cut-off photo
capture truncated at the browser limitWarns when the page is so tall that the photo hit the limit and stopped before the end.
Where Chrome is
It looks on its own, on every system.
To use the computer's Chrome, the app first has to find it, and Windows, Mac and Linux keep the browser in different places. The app searches on its own, in a fixed order, and stops at the first one it finds. Pick a system to see the path.
- An address you chooseAnyone who keeps Chrome somewhere unusual can tell the app where it is.
VISUALIZADOR_CHROME - Windows' list of programsWhere Windows itself notes where Chrome was installed. Searching any other way often finds Edge instead of Chrome.
App Paths\chrome.exe - The program foldersProgram Files and Program Files (x86), where Chrome usually lives.
- Windows' list of programsWhere Windows itself notes where Chrome was installed. Searching any other way often finds Edge instead of Chrome.
- The last tryThe app looks for Chrome and Chromium by the five names they usually have, folder by folder.
- Found: the path shows in the panel and the screens can be measured.Not found: the app explains what to install and offers to search again.
Each version of the app, Windows, Mac or Linux, carries only its own system's search.
The technologies
What it is made of, piece by piece
A Windows program that opens the computer's own Chrome, pretends to be each device and photographs the site on all of them. Pick a piece to see what it does here and which file it is in.
11technologies, in 3 layers
Screen
Core
Browser
The screens
The app, from opening to report.
The opening screen, the bench before the first measurement and the BabyShoes store measured, in the app's light and dark themes. Click a screen to see it large.
Creative and developer toolsUIForge