Localhost responsive tester
See your development server at localhost on a phone, a tablet and a laptop at once, kept in sync as you scroll. Free, with no account or uploads.
See your dev server on every device
Type your development server's address, such as localhost:3000, and see it on a phone, a tablet and a laptop at once. Add one line to your site to keep them in sync as you scroll, click and type. Your browser loads it straight from the site; nothing goes through KeepSimp.
Try
Each device is marked with the breakpoint its width is in.
Every device one by one, turning them on their side and sizes of your own are in the tester's window, under Devices.
The sizes are each device's own; the browser drawing them is yours, so touch, the user agent and the pixel density are this browser's.
A little help along the way
Follow these steps. Every option is explained underneath, and the site is loaded by your own browser, never through KeepSimp.
- Type the addressType your site's address, such as example.com, or your development server's, such as localhost:3000 or 192.168.1.20:5173, and press Show it on devices (on the tester's own page, first choose which screens: one of each, phones, tablets, or laptops and desktops). A name on your computer or network is opened over http, anything else over https.
- Choose the devicesTick the devices to show on the left (on a phone, under the devices button), find one by name or size, or start from a set: a phone, a tablet and a laptop; popular phones; Apple; Android; laptops and desktops.
- Look at them side by sideEach device shows the site at its own width and height, drawn smaller so that they fit side by side. Choose Fit, or a size such as 50% or 100%, above them.
- Turn, reload and openEach device's title has buttons to turn it on its side, load the page again and take the device away; its menu moves it earlier or later and opens the site in a new tab. The button beside the address loads every device again.
- Arrange themDrag a device by the dots in its title to put it elsewhere. Under the layout button (or More options before you start), lay them out to wrap, in one row, or one at a time with a tab for each; draw device frames round phones and tablets; and choose whose breakpoints each device is said to be in, Tailwind's or Bootstrap's.
- Sizes of your ownUnder Your sizes, name a size and give its width and height, then Add this size. Change it by typing a new width or height, or drag its corner on the canvas to resize it and watch the breakpoint change.
- Keep them in syncUnder the sync button, How to turn syncing on gives one line to put in your site while you develop it. With it, scrolling, clicks, typing and going to another page on one device are done on every other device too; switch each kind off in the same menu, which also says how many devices are in sync.
- Take picturesPress the camera button (or P) and let the browser share this tab. Each device in view becomes a picture of its own at the size shown: save each one, or all of them in one zip.
- KeysR loads every device again, T turns them all, + and − show them larger or smaller, 0 fits them and 1 shows them at full size, F draws frames, D chooses devices, P takes pictures, Ctrl or ⌘ + L goes to the address and ? lists the keys. Ctrl or ⌘ and the wheel, or a pinch, sizes the devices.
Questions people ask
- Does KeepSimp see my development server?
- No. Your own browser loads localhost straight from your computer; nothing passes through KeepSimp, which has no server in between.
- Why does Chrome ask about my local network?
- Chrome asks before a page on the internet reaches servers on your computer or network. Allow it, and the devices load your server. Safari can refuse localhost inside a page served over https; use another browser there.
- How do I keep the devices in sync?
- Under the sync button, How to turn syncing on gives one line to put in your site while you develop it. Then scrolling, clicks, typing and going to another page on one device are done on the others. Take it out before the site goes live.
This page is the Responsive tester, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Responsive tester's own page.
Read the step-by-step guide