Title: Responsive Checker & Device Preview – Mobile Responsive Testing, Simulator & Developer Tools Author: FARAZFRANK Published: Maig 22, 2026 Last modified: Setembre 18, 2026 --- Search plugins ![](https://ps.w.org/frank-responsive-checker/assets/banner-772x250.png?rev=3544934) ![](https://ps.w.org/frank-responsive-checker/assets/icon-256x256.png?rev=3544934) # Responsive Checker & Device Preview – Mobile Responsive Testing, Simulator & Developer Tools By [FARAZFRANK](https://profiles.wordpress.org/farazfrank/) [Download](https://downloads.wordpress.org/plugin/frank-responsive-checker.1.1.0.zip) [Live Preview](https://bal.wordpress.org/plugins/frank-responsive-checker/?preview=1) * [Details](https://bal.wordpress.org/plugins/frank-responsive-checker/#description) * [Reviews](https://bal.wordpress.org/plugins/frank-responsive-checker/#reviews) * [Installation](https://bal.wordpress.org/plugins/frank-responsive-checker/#installation) * [Development](https://bal.wordpress.org/plugins/frank-responsive-checker/#developers) [Support](https://wordpress.org/support/plugin/frank-responsive-checker/) ## 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](https://wpfrank.com/how-to-use-frank-responsive-checker/) #### 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. ## Screenshots [⌊Site Preview in HD Desktop⌉⌊Site Preview in HD Desktop⌉[ Site Preview in HD Desktop [⌊Site Preview in iPhone 16 Pro Max Preview⌉⌊Site Preview in iPhone 16 Pro Max Preview⌉[ Site Preview in iPhone 16 Pro Max Preview [⌊Site Preview in iPad Pro 13⌉⌊Site Preview in iPad Pro 13⌉[ Site Preview in iPad Pro 13 [⌊Site Preview in 4K Desktop⌉⌊Site Preview in 4K Desktop⌉[ Site Preview in 4K Desktop [⌊Device Comparison Mode⌉⌊Device Comparison Mode⌉[ Device Comparison Mode [⌊Responsive Mockup Generator⌉⌊Responsive Mockup Generator⌉[ Responsive Mockup Generator [⌊Shareable link Generator⌉⌊Shareable link Generator⌉[ Shareable link Generator [⌊All Device Screenshots Gallery⌉⌊All Device Screenshots Gallery⌉[ All Device Screenshots Gallery [⌊General Settings⌉⌊General Settings⌉[ General Settings [⌊Features Control⌉⌊Features Control⌉[ Features Control [⌊User Access Controls⌉⌊User Access Controls⌉[ User Access Controls ## Installation 1. Log in to your WordPress admin dashboard and navigate to **Plugins > Add New**. 2. Search for `Responsive Checker` or `Frank Responsive Checker`, then click **Install Now**. Alternatively, upload the `frank-responsive-checker` directory to `/wp-content/ plugins/`. 3. Click **Activate**. 4. Click the **Device Preview** button in your admin bar (or use keyboard shortcut` Ctrl+Shift+D`) to start testing any page. 5. 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 `@media` rule 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 * [ FARAZFRANK ](https://profiles.wordpress.org/farazfrank/) * [ A WP Life ](https://profiles.wordpress.org/awordpresslife/) * [ Pathhan ](https://profiles.wordpress.org/razipathhan/) * [ mohammadhanif ](https://profiles.wordpress.org/hanif0991/) * [ Alexander ](https://profiles.wordpress.org/muhammadshahid/) * [ fkfaisalkhan007 ](https://profiles.wordpress.org/fkfaisalkhan007/) * [ Sharik Khan ](https://profiles.wordpress.org/sharikkhan007/) * [ zish ](https://profiles.wordpress.org/zishlife/) [Translate “Responsive Checker & Device Preview – Mobile Responsive Testing, Simulator & Developer Tools” into your language.](https://translate.wordpress.org/projects/wp-plugins/frank-responsive-checker) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/frank-responsive-checker/), check out the [SVN repository](https://plugins.svn.wordpress.org/frank-responsive-checker/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/frank-responsive-checker/) by [RSS](https://plugins.trac.wordpress.org/log/frank-responsive-checker/?limit=100&mode=stop_on_copy&format=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. ## Meta * Version **1.1.0** * Last updated **2 setmanes ago** * Active installations **20+** * WordPress version ** 5.0 or higher ** * Tested up to **7.1.2** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/frank-responsive-checker/) * Tags * [developer-tools](https://bal.wordpress.org/plugins/tags/developer-tools/)[device preview](https://bal.wordpress.org/plugins/tags/device-preview/) [mobile preview](https://bal.wordpress.org/plugins/tags/mobile-preview/)[responsive testing](https://bal.wordpress.org/plugins/tags/responsive-testing/) * [Advanced View](https://bal.wordpress.org/plugins/frank-responsive-checker/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/frank-responsive-checker/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/frank-responsive-checker/reviews/) ## Contributors * [ FARAZFRANK ](https://profiles.wordpress.org/farazfrank/) * [ A WP Life ](https://profiles.wordpress.org/awordpresslife/) * [ Pathhan ](https://profiles.wordpress.org/razipathhan/) * [ mohammadhanif ](https://profiles.wordpress.org/hanif0991/) * [ Alexander ](https://profiles.wordpress.org/muhammadshahid/) * [ fkfaisalkhan007 ](https://profiles.wordpress.org/fkfaisalkhan007/) * [ Sharik Khan ](https://profiles.wordpress.org/sharikkhan007/) * [ zish ](https://profiles.wordpress.org/zishlife/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/frank-responsive-checker/)