Title: Responsive Checker – Mobile Simulator, Device Testing & Mockups Author: FARAZFRANK Published: Gicurasi 22, 2026 Last modified: Kamena 8, 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 – Mobile Simulator, Device Testing & Mockups By [FARAZFRANK](https://profiles.wordpress.org/farazfrank/) [Download](https://downloads.wordpress.org/plugin/frank-responsive-checker.1.1.0.zip) [Live Preview](https://kin.wordpress.org/plugins/frank-responsive-checker/?preview=1) * [Details](https://kin.wordpress.org/plugins/frank-responsive-checker/#description) * [Reviews](https://kin.wordpress.org/plugins/frank-responsive-checker/#reviews) * [Installation](https://kin.wordpress.org/plugins/frank-responsive-checker/#installation) * [Development](https://kin.wordpress.org/plugins/frank-responsive-checker/#developers) [Support](https://wordpress.org/support/plugin/frank-responsive-checker/) ## Description Frank Responsive Checker is a complete tool for testing site layouts and front-end performance directly inside your WordPress dashboard. By simulating 13+ specific device viewports, including the latest mobile screens, tablets, and desktop displays, this tool streamlines the debugging process for developers, designers, and website owners. Whether you are performing a design audit, checking website accessibility, or testing custom breakpoints, this tool provides a native testing environment without requiring third-party subscriptions or external applications. How this plugin works: [Check Docs](https://wpfrank.com/how-to-use-frank-responsive-checker/) ### Key Features List * 13+ Device Presets: Test on modern smartphones, tablets, and desktop displays. * Automatic Breakpoint Detection: Scan your CSS to find and jump to active media queries instantly. * Visual Regression Testing: Save baseline layouts and use comparison sliders to catch pixel shifts. * Side-by-Side Comparison: View multiple devices at once with fully synchronized scrolling. * Accessibility Scanner: Audit WCAG color contrast, missing alt tags, and test keyboard focus maps. * Advanced Developer Tools: Built-in DOM inspector, JavaScript console, and SEO analyzer. * Network Throttling: Test performance and loading states with Slow 3G and Offline emulation. * Touch Mode Simulation: Trigger authentic swipe and tap events for mobile interactions. * Marketing Mockup Generator: Snap instant screenshots and create high-res transparent designs. * Dark/Light Mode Toggles: Force color scheme preferences without changing OS settings. ### Comprehensive Device Preview and Viewport Testing Simulate how your web pages render on popular mobile screens, tablets, and desktop monitors instantly. * Test layouts across modern smartphones like the iPhone 15 Pro, Samsung Galaxy S22, and Google Pixel. * Review tablet views including iPad Pro and Galaxy Tab formats. * Toggle between portrait and landscape orientation with a single click to verify responsive flow. * Enter custom width and height values to test any specific viewport size not included in the presets. * Save your custom device profiles to your personal library for quick access during future testing sessions. ### Automatic CSS Breakpoint Detection Never guess where your design breaks again. The built-in breakpoint scanner automatically reads your active stylesheet and extracts all media query breakpoints. * Automatically detect and list all CSS breakpoints used on the current page. * Click any detected breakpoint to instantly snap the viewport to that exact width. * Review how your layout responds at critical structural transition points. ### Visual Regression and Layout Comparison Identify pixel-level changes and layout shifts using advanced visual comparison tools. * Establish a baseline screenshot of your current layout to serve as a reference point. * Use the visual comparison overlay slider to detect exact differences between your baseline and new code changes. * Load multiple device frames side-by-side to examine layout consistency across different screen sizes. * Synchronize scrolling across all active comparison panels to inspect lengthy pages effortlessly. ### Web Accessibility Audits (WCAG Compliance) Ensure your website is accessible to all users by running automated accessibility tests directly on your live pages. * Perform WCAG contrast checks to verify that text remains readable against background colors. * Scan the document for images missing alternative text attributes to improve screen reader compatibility. * Visualize the keyboard navigation flow with numbered focus map badges. * Simulate screen reader output to understand how visually impaired users experience your content. ### Advanced Developer Tools and Debugging Access a suite of advanced features designed specifically to help developers troubleshoot complex front-end issues. * Network Throttling: Simulate Slow 3G or Offline network conditions to test page resilience and loading states. * Touch Mode Emulation: Simulate true mobile touch events like swipes and taps while hiding the desktop cursor. * Design Mode: Enable content editing directly within the viewport to test copy changes without modifying your database. * SEO Analyzer: Scan page meta tags, heading structures, and essential SEO attributes instantly. * Color Scheme Emulation: Force system dark or light mode preferences to test CSS media features. * Dedicated Code Inspector: Open a built-in DOM inspector and JavaScript console specifically for the simulated viewport. ### Instant Screenshots and Mockup Generator Generate professional marketing assets and visual bug reports with one click. * Capture high-fidelity PNG screenshots of the current viewport. * Use the batch capture feature to automatically snap screenshots across multiple popular devices simultaneously. * Export designs with transparent backgrounds or custom solid colors using the Mockup Generator. ## Installation 1. Upload the plugin folder to your `/wp-content/plugins/` directory. 2. Activate the plugin on the Plugins page in WordPress. 3. Click the Device Preview button in your admin bar to start testing. 4. Go to Settings > Responsive Checker to adjust your options. ## FAQ ### How do I start the responsive viewport testing tool? Click the Device Preview button in your admin bar. You can also use the Ctrl+Shift +D shortcut. ### Can I use viewport comparison to test layouts? Yes. You can load multiple viewports side-by-side. The comparison features synchronized scrolling. ### Does this plugin help to analyze site layout accessibility? Yes. The accessibility audits test contrast ratios, missing alt texts, focus order, and screen reader content. ### Can I take screenshots during testing? Yes. You can take screenshots of single viewports or all viewports at once. ### How do I perform a site analyze run on private pages? The plugin runs in your active session. This lets you test and analyze draft and private pages. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Responsive Checker – Mobile Simulator, Device Testing & Mockups” 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 – Mobile Simulator, Device Testing & Mockups” 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 **1 week ago** * Active installations **Fewer than 10** * WordPress version ** 5.0 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/frank-responsive-checker/) * Tags * [breakpoints](https://kin.wordpress.org/plugins/tags/breakpoints/)[device preview](https://kin.wordpress.org/plugins/tags/device-preview/) [responsive testing](https://kin.wordpress.org/plugins/tags/responsive-testing/) [viewport](https://kin.wordpress.org/plugins/tags/viewport/) * [Advanced View](https://kin.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/)