Introduction to BlueCanvas tools · 013 responsive webchrome extensionscreen check
Check mobile, tablet, and PC screens at once with BLUE_Responsive
Approximately 4 minutes to readBlueCanvas
Is there a way to see how my page looks on multiple devices at once?
BLUE_Responsive is a free Chrome extension that opens simultaneously on one screen for mobile, tablet, and PC when you press Alt+R on the page you want to check. When you scroll on one device, all screens move together so you can compare the same section by device, and you can save the entire screen and page for each device as PNG.
Key takeaways
BlueCanvas BLUE_Responsiveis a free Chrome extension that opens simultaneously on one screen for mobile, tablet, and PC when you press Alt+R on the page you want to check.
When you scroll on one device, all screens move together, so you can immediately compare how the same section looks on different devices.
Enter the desired size and save it as my configuration, and save the screen for each device and the entire page as PNG.
Scene shown in the video
The video begins with the same page changing into PC, tablet, and mobile shapes depending on the screen width. The same page looks different on each screen, so we introduce a tool to compare the differences on one screen.
scene in the video
What to do
Turn on with Alt+R
When you press Alt+R on the page you want to inspect, several preview screens will appear.
Compare at the same time
Check mobile, tablet, and PC simultaneously on one screen, and view mobile and tablet in turn in larger format.
scroll together
One scroll moves all screens together to compare the same sections
Save my configuration
Enter your desired size and save your device configuration
Save as PNG
Save screens for each device and entire long pages as PNG.
Each screen is drawn at the px width of the actual device, so CSS media queries work as is. The last scene of the video guides you to search for BLUE_Responsive in the Chrome Web Store.
In what situations do you use it?
After creating the screen, you need to make sure that it is consistent on mobile and tablet. This tool helps you do that check all at once instead of switching between devices.
When checking whether a newly created page is out of sync on mobile
When you see side-by-side how the same section looks on your phone, tablet, and PC
When checking the mobile response of a site where the server separately downloads HTML for mobile
When you need to save the inspected screen as an image
Since the mobile frame changes the User-Agent of the request and sends it to the corresponding device, you can also check sites where the server divides the mobile screen separately.
How to get started
In the PROGRAM menu of BlueCanvas website, RESPONSIVE CHECKER You can go to the introduction page. Installation is done from the Chrome Web Store.
installation: Search for BLUE_Responsive in the Chrome Web Store and add it to Chrome.
On: Press Alt+R on the page you want to check to open the overlay. Alt+Shift+R also works the same way
Add device: Add phones, tablets, and desktops with one click and scroll to compare
Save: Enter the required resolution, save frequently used configurations, and save the screen for each device or the entire page as PNG.
How to use and environment
It's free and no membership is required. It works in Chromium-based browsers that support Manifest V3, including Chrome.
Input-based media queries that determine whether or not a touch occurs are evaluated as desktop input values. Additionally, if you click a link within the frame to move to another page, the mobile display may be missing, so it is designed as a tool to check single pages.
Full video subtitles (6 scenes)
Same page, different screen
The same page looks different on each screen. We show you how the layout changes when the screen width changes.
Turn on with Alt+R
On the page you want to check, press Alt+R and turn on Blue Canvas BLUE_Responsive. Several preview screens will appear.
Simultaneous check on mobile, tablet, and PC
Check your mobile, tablet, and PC simultaneously on one screen. Look at the mobile and tablet in turn and compare the differences in layout.
scroll together
When you scroll once, all screens move together. Compare the same section side-by-side by device.
Enter size and save my configuration
Enter the desired size directly and save frequently used device configurations.
PNG saving and installation instructions
Both the screen for each device and the entire page are saved as PNG. Search for and install the free Chrome extension BLUE_Responsive from the Chrome Web Store.
Frequently Asked Questions
Is BLUE_Responsive free?
yes. The introduction page states that there are no advertisements, payments, subscriptions, or membership registration, and that you can use it without restrictions after installing all functions.
How is this different from the browser's Developer Tools device mode?
Device mode in Developer Tools shows only one device at a time. BLUE_Responsive displays multiple devices on one screen at the same time and synchronizes scrolling, so you can compare how the same section looks on different devices at a glance.
Can I also check sites where the server downloads mobile pages separately?
yes. The mobile frame replaces the User-Agent in the request with the corresponding device value. So, even sites where the server divides HTML for mobile into User-Agent can check mobile responses.
Are there any limits to be aware of?
Input-based media queries that determine whether or not a touch occurs are evaluated as desktop input values. This is a tool designed to check single pages, as the mobile display may disappear when moving to another page within the frame.
Open the page you want to check on mobile, tablet, and PC at once.
BlueCanvas BLUE_Responsive is a free Chrome extension and does not require registration. After installing from the Chrome Web Store, start by pressing Alt+R on the page you want to check.
