Responsive Checker & Device Preview - Mobile Responsive Testing, Simulator & Developer Tools

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 @media queries 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.

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.