Description
Frank Responsive Checker is an all-in-one responsive testing environment, device preview simulator, and front-end developer toolkit built directly into your WordPress dashboard. Test, analyze, and debug how your website renders across smartphones, tablets, laptops, desktop monitors, and ultra-wide 4K displays with a single click from your admin bar.
By simulating 13+ popular device viewports and arbitrary custom screen resolutions, this plugin eliminates the need for expensive third-party testing subscriptions or manual browser resizing. Test live pages, private drafts, and staged redesigns natively in your authenticated WordPress session.
How this plugin works: Check Docs
Why Choose Frank Responsive Checker?
- Native WordPress Integration — Launch responsive previews instantly from the admin bar on any post, page, or custom post type. Test private and draft pages seamlessly without exposing them to external web services.
- Side-by-Side Multi-Device Testing — Compare mobile, tablet, and desktop viewports side-by-side with synchronized scrolling to spot layout discrepancies simultaneously.
- Automatic CSS Breakpoint Detection — Automatically scans your active stylesheets to extract all CSS
@mediaqueries so you can test transitions at your theme’s exact breakpoints. - Visual Regression & Layout Diff Slider — Capture baseline layout screenshots and overlay live code changes with an interactive slider to catch unexpected pixel shifts.
- Built-in Front-End Developer Tools — Includes a dedicated DOM inspector, JavaScript console, network throttling (Slow 3G / Offline), touch mode emulation, and live Design Mode content editing.
- Marketing Mockup Generator — Generate high-resolution transparent device mockups and batch screenshots for client presentations and QA reports with one click.
Feature Comparison: Frank Responsive Checker vs. Alternatives
Feature
Frank Responsive Checker
Chrome DevTools
Cloud SaaS (e.g. BrowserStack)
Instant 1-Click Admin Bar Launch
Included (Free)
Requires F12 Inspect
External Website Login
Side-by-Side Multi-Device View
Included (Free)
No (Single Viewport Only)
Expensive Add-on
Synchronized Multi-Screen Scrolling
Included (Free)
Not Available
Complex Setup
Automatic CSS Breakpoint Scanner
Included (Free)
Manual Inspection Only
Not Available
Visual Regression Comparison Slider
Included (Free)
Not Available
Enterprise Only ($$$)
WCAG Accessibility & Focus Order Maps
Included (Free)
Partial (Lighthouse)
Separate Tools Required
Transparent Device Mockup Generator
Included (Free)
Not Available
Paid Design Apps
Test Authenticated Draft & Private Pages
Native (Same Session)
Manual Setup
Requires Tunnel / Auth
Cost
100% Free Forever
Free
$29–$99/month
Key Features & Capabilities
- Device Preview Simulator — Instant preview presets for modern mobile devices including iPhone 16 Pro, iPhone 15 Pro, Samsung Galaxy S22, Google Pixel, iPad Pro, Galaxy Tab, standard laptops, and 4K displays.
- Custom Viewports & Orientations — Enter custom pixel dimensions, switch between portrait and landscape mode, and save frequently used custom screen resolutions to your profile library.
- Automatic CSS Breakpoint Detection — Parse active theme and plugin stylesheets in real-time. Click any detected media query to instantly snap the viewport to that exact transition point.
- Visual Regression Diff Testing — Save a baseline screenshot of your stable layout and use the interactive split-slider to compare against new CSS or plugin updates.
- Multi-Screen Synchronized Scrolling — Load multiple device viewports simultaneously. Scrolling on one panel automatically scrolls all active devices in lockstep.
- Web Accessibility Audits (WCAG Compliance) — Automated color contrast ratio checks, missing image alt text detection, simulated screen reader output, and numbered keyboard focus maps.
- Network Speed Throttling — Simulate Slow 3G, Fast 3G, and Offline network conditions to evaluate loading states, font rendering, and layout stability.
- Touch Event Simulation — Emulate authentic mobile swipe, tap, and drag-to-scroll interactions while hiding desktop cursor artifacts.
- Live Design Mode — Edit text and copy directly inside the simulated viewport to review typography hierarchy before committing changes to your database.
- High-Res Mockup & Batch Screenshot Generator — Capture pixel-perfect PNG screenshots of individual viewports or trigger batch captures across all devices. Export device frames with transparent backgrounds for client proposals.
Screenshots
Installation
- Log in to your WordPress admin dashboard and navigate to Plugins > Add New.
- Search for
Responsive CheckerorFrank Responsive Checker, then click Install Now. Alternatively, upload thefrank-responsive-checkerdirectory to/wp-content/plugins/. - Click Activate.
- Click the Device Preview button in your admin bar (or use keyboard shortcut
Ctrl+Shift+D) to start testing any page. - Configure display preferences and user role access under Settings > Responsive Checker.
FAQ
-
How do I launch the responsive preview tool?
-
Click the Device Preview button located in your WordPress admin bar on any frontend page or admin screen. You can also trigger the preview immediately using the keyboard shortcut
Ctrl+Shift+D. -
Can I test draft posts and password-protected pages?
-
Yes. Because the simulator runs within your active authenticated WordPress session, you can preview and test draft posts, private pages, and password-protected templates without configuring external credentials.
-
How does the automatic breakpoint scanner work?
-
The plugin reads the compiled stylesheets active on the current page, extracts all CSS
@mediarule widths, and presents them in an interactive breakpoint menu. Clicking any breakpoint immediately resizes the viewport to that exact width. -
Can I view multiple device viewports at the same time?
-
Yes. In Compare Mode, you can load multiple device frames side-by-side. The panels feature synchronized scrolling so you can inspect how responsive elements behave simultaneously across screen sizes.
-
How does Visual Regression testing work?
-
Click the baseline snapshot button to capture your current layout state. After modifying CSS or updating plugins, open the visual regression overlay to drag a comparison slider over the page and spot pixel-level discrepancies.
-
Does this plugin send website data to third-party servers?
-
No. All viewport rendering, breakpoint detection, accessibility testing, and screenshot captures are processed entirely inside your browser and local server. No layout or user data is transmitted externally.
-
Can I restrict access to administrators only?
-
Yes. Under Settings > Responsive Checker > User Access Controls, you can restrict device preview capabilities to specific WordPress user roles.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Responsive Checker & Device Preview – Mobile Responsive Testing, Simulator & Developer Tools” is open source software. The following people have contributed to this plugin.
Contributors
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0
- Date: 8 June 2026
- Fixed screenshot capture to output images matching the visual frame size instead of rendering at full device resolution.
- Fixed DOM Inspector coordinate accuracy on scaled device frames so element detection aligns with the cursor.
- Fixed desktop viewport rendering to show true device layouts using CSS transform scaling instead of shrinking the iframe.
- Inspector highlight overlay now correctly accounts for both display scaling and zoom level.
- Fixed compare mode viewport rendering to show true device layouts using CSS transform scaling and adjusted initialization timing.
- Fixed device selection dropdowns in compare mode for devices containing quotation marks in their names (e.g. iPad Pro 13″, Laptop 13″).
- Fixed mockup generator capture to support scroll coordinates and synchronise scroll positions with the active preview.
- Fixed network speed selection to automatically reload the page and trigger load-time speed simulation tracking.
1.0.6
- Date: 6 June 2026
- Added frontend responsiveness checking button to settings panel.
- Fixed icon alignment for setting dashboard buttons.
- Fixed vertical alignment and spacing for Go URL navigation button in responsive frame dashboard.
- Fixed z-index layering issue making add device popup render behind the fullscreen panel.
- Fixed disappearing Add Device button bug when custom devices list is updated.
- Added scroll coordinates support to html2canvas captures to output scrolled layouts accurately.
- Added interactive full-screen slide lightbox viewer for gallery screenshots with swipe/keyboard navigation (Esc, Left/Right arrows).
- Updated device lists to include the latest modern devices (e.g., iPhone 15, Laptop 15″) and removed obsolete options.
- Fixed iframe navigation history tracking to properly enable Back and Forward buttons during testing.
- Fixed conflict with duplicate “Compare” buttons in the toolbars by assigning distinct UI action classes.
- Fixed CSS conflict that was hiding the side-by-side comparison panels.
- Fixed User-Agent spoofing to immediately apply and properly emulate mobile browsers using client-side injection and a background proxy.
- Added HTTP fallback for the User-Agent copy button to support local development environments.
- Overhauled Touch Mode to add true interactive event forwarding, drag-to-scroll support, and perfect pointer accuracy.
- Fixed encoding issues displaying corrupted text (mojibake) across the plugin UI.
- Fixed cross-iframe media query evaluation errors to accurately scan and extract CSS breakpoints.
- Fully implemented Baseline saving and Visual Comparison diff overlays with local storage support and UI clear actions.
- Fixed device frame resizing calculations for accurate em/rem to pixel conversion when jumping to breakpoints.
- Improved Fullscreen layout by separating Responsive and Developer controls into two distinct floating toggle buttons.
- Moved Exit Fullscreen button to the bottom right to avoid overlapping developer side-panel close buttons.
1.0.4
- Fixed double script execution issue in WordPress backend when admin bar is active.
- Moved admin settings styles and scripts to load exclusively on the plugin settings and documentation pages.
1.0.3
- Removed custom CSS input to follow WordPress security guidelines.
1.0.2
- Updated script loading to meet WordPress guidelines.
- Fixed security nonce issues in AJAX requests.
- Moved styles to external files for faster load times.
1.0.1
- Added device preview screenshots and regression tools.
- Added side-by-side comparison with sync scrolling.
- Added custom viewports and user agent testing.
- Added accessibility contrast checks and focus maps.
- Added temporary links to share layout tests.
- Added developer console logs and media query lists.
1.0.0
- First release of the plugin.