Wopisanje
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
Instalacija
- 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.
Sobustatkujuce a wuwijarje
„Responsive Checker & Device Preview – Mobile Responsive Testing, Simulator & Developer Tools“ jo software wótwórjonego žrědła. Slědujuce luźe su pśinosowali k toś tomu tykacoju.
Sobustatkujuce
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.