Simultaneous multi-viewport preview
Render the same URL in phone, tablet, and desktop frames at the same time. Each frame uses a real device width, so CSS breakpoints work as expected.
Chrome Extension · v1.3.0
Test responsive layouts on mobile, tablet, and desktop
Test responsive layouts on mobile, tablet, and desktop
all at once.
BLUE_Responsive is a free Chrome extension that opens the page you are viewing in multiple device viewports at the same time. CSS media queries respond to real device widths, scrolling stays synchronized, and mobile user-agent rendering lets you inspect mobile HTML served by the server. Save individual viewport shots or full-page scrolling captures with one click.
Why BLUE_Responsive
Stop switching devices and refreshing the page
You do not need to toggle DevTools device mode repeatedly. Place several viewports side by side in one overlay and review every device with a single scroll.
Synchronized scrolling
Scroll one device and the others move by the same relative position. Compare the same section across every screen at a glance, and turn synchronization off whenever needed.
Real mobile UA rendering
Mobile frames replace the request User-Agent with the selected device profile. Sites that serve separate mobile HTML based on the UA return the same view they would send to a real phone.
Device Picker
Popular devices and custom resolutions in one place
Add common phones, tablets, and desktops with one click, or enter any W×H resolution you need to test.
Add a device
Phones
- iPhone SE · 375×667
- iPhone 12·13·14 · 390×844
- iPhone 15·16 · 393×852
- iPhone 15·16 Pro Max · 430×932
- Galaxy S24 · 360×800
- Galaxy S24 Ultra · 384×824
- Pixel 8 · 412×915
- Galaxy Z Fold (folded) · 344×882
Tablets
- iPad mini · 768×1024
- iPad Air 11" · 820×1180
- iPad Pro 11" · 834×1194
- iPad Pro 12.9" · 1024×1366
- Galaxy Tab S9 · 800×1280
Desktops
- 13" laptop · 1280×800
- 15" laptop · 1440×900
- HD desktop · 1366×768
- FHD desktop · 1920×1080
- Wide QHD · 2560×1440
Custom
Width
Height
Add
Load frequently used layouts instantly with preset chips—Responsive trio, Mobile focus, and Show all—or select ★ Save to create your own preset.
Key Features
Tools that make responsive debugging faster
Presets, rotation, scaling, wrapping, and a focused workaround for sites that block embedding—all inside one overlay.
Presets & saved layouts
Use built-in chips such as Responsive trio, Mobile focus, and Show all. Select ★ Save to add the current layout as your own preset, and remove it with the chip’s ✕.
Custom devices
Add popular phones, tablets, and desktops, or enter a custom W×H to create and inspect any resolution immediately.
Portrait and landscape rotation
Use the ⟲ button to switch each device frame between portrait and landscape layouts instantly.
Scale slider & fit
Adjust the overall scale or fit devices automatically to the available height. Switch between one horizontal row and a wrapping grid to keep every viewport visible.
Screenshots & scrolling capture
Save the visible frame area (📷), a stitched full-page scrolling capture (📜), or the complete window containing every device (🖼) as PNG. Repeated fixed headers are cleaned up automatically.
Preview sites that block embedding
For sites protected by X-Frame-Options or CSP frame-ancestors, the viewer temporarily removes those headers only from responses for the previewed site in the active tab. Frames from other sites embedded in that page are left unchanged.
Keyboard shortcut toggle
Open or close the viewer on any page with the toolbar icon, Alt+R, or Alt+Shift+R. Inside the overlay, ESC exits while F5 and Ctrl+R refresh only the device frames.
Shortcuts
Move faster with keyboard shortcuts
The default toggles are Alt+R and Alt+Shift+R. Assign your preferred keys at chrome://extensions/shortcuts.
Alt + R
Toggle viewer
Open or close the overlay, just like the toolbar icon
Alt + Shift + R
Toggle viewer (alternate)
Use when Alt+R conflicts with another application
ESC
Quick exit
Close the overlay immediately and return to the normal page
F5 / Ctrl + R
Refresh frames only
Reload the device frames without leaving the viewer
Installation
Install in under a minute
Install it from the Chrome Web Store with one click and start testing immediately.
Add it from the Chrome Web Store
Open BLUE_Responsive on the Chrome Web Store, select Add to Chrome, and pin the extension to the toolbar to finish setup.
Toggle it on any page
On the page you want to inspect, press Alt+R (or Alt+Shift+R) or select the toolbar icon. Add devices to the overlay and start scrolling.
To preview file:// pages
To inspect local HTML files (file://), enable Allow access to file URLs on the extension details page. Regular http(s) pages work without extra settings.
FAQ
Frequently asked questions
Answers to common questions before installation.
Is BLUE_Responsive really free?
Yes. It is completely free, with no ads, payments, subscriptions, or account registration. Every feature is available without limits immediately after installation.
How is it different from DevTools device mode?
DevTools displays one device at a time. BLUE_Responsive places multiple devices together on one screen and synchronizes their scrolling, so you can compare the same section across every viewport at a glance.
Can it preview sites that serve a separate mobile page?
Yes. Mobile frames replace the request User-Agent with the selected device UA and set the UA Client Hints (Sec-CH-UA*) sent by current Chrome versions to mobile values. Before the page loads, it also overrides navigator.userAgent, touch, and screen values, so both server-side UA or CH routing and JavaScript mobile detection recognize the frame as mobile.
Can it preview sites that block embedding?
In most cases, yes. In the tab where the viewer is active, it temporarily removes X-Frame-Options and CSP frame-ancestors headers only from iframe responses for the previewed domain. Nested frames from other sites remain protected, and the rule is removed as soon as you close the viewer, navigate away, or close the tab.
Can I change the toggle shortcut to Ctrl+Alt+R or another key?
Yes. Chrome does not allow Ctrl+Alt combinations as manifest defaults, so the extension provides Alt+R and Alt+Shift+R. You can assign any supported shortcut at chrome://extensions/shortcuts.
Are there any limitations I should know about?
Input-based CSS media queries such as @media (hover:none) and (pointer:coarse) are evaluated using desktop input values; use the single-device DevTools mode when complete emulation is required. Following a link inside a frame may also remove the mobile marker, so the extension is designed primarily for inspecting one page at a time.
Which browsers are supported?
BLUE_Responsive uses Manifest V3 and works in current Chromium-based browsers, including Google Chrome, Microsoft Edge, Brave, and Arc.
Finish responsive checks on one screen.
Install it from the Chrome Web Store and press Alt+R on any page.
Your mobile, tablet, and desktop views open together.
Contact
A rough idea is a good place to start.
Let’s shape your project together
Tell us where you are and what you want to achieve.
We’ll outline a practical scope, process, and estimated budget.
- 1Review your inquiry
- 2Align scope and timeline
- 3Share proposal and estimate