Title: Responsive Checker – Device Preview, Developer Tools & Site Testing Author: FARAZFRANK Published: May 22, 2026 Last modified: July 20, 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, Developer Tools & Site Testing By [FARAZFRANK](https://profiles.wordpress.org/farazfrank/) [Download](https://downloads.wordpress.org/plugin/frank-responsive-checker.1.1.0.zip) [Live Preview](https://twd.wordpress.org/plugins/frank-responsive-checker/?preview=1) * [Details](https://twd.wordpress.org/plugins/frank-responsive-checker/#description) * [Reviews](https://twd.wordpress.org/plugins/frank-responsive-checker/#reviews) * [Installation](https://twd.wordpress.org/plugins/frank-responsive-checker/#installation) * [Development](https://twd.wordpress.org/plugins/frank-responsive-checker/#developers) [Support](https://wordpress.org/support/plugin/frank-responsive-checker/) ## Description Frank Responsive Checker is a complete device preview, responsive check, and site testing tool for website responsive design and front-end performance directly inside your WordPress dashboard. Test and analyze how your website looks and functions in every possible device — including smartphones, tablets, laptops, desktop monitors, and 4K displays. By simulating 13+ specific device viewports and custom screen resolutions, these developer tools streamline the debugging process for developers, designers, and website owners. Whether you are performing a design audit, checking website accessibility, running site testing across custom breakpoints, or conducting a full website responsive check in every possible device layout, this plugin 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 * Device Preview & Presets: Instant device preview on modern smartphones, tablets, laptops, and desktop displays to check your site in every possible device layout. * Responsive Check & Breakpoint Detection: Scan your CSS to find media queries and perform site testing at active breakpoints. * Visual Regression & Site Testing: Save baseline layouts and use comparison sliders to catch pixel shifts across device viewports. * Side-by-Side Comparison: View multiple devices at once with fully synchronized scrolling for multi-screen testing. * Accessibility Scanner: Audit WCAG color contrast, missing alt tags, and test keyboard focus maps. * Advanced Developer Tools: Built-in DOM inspector, JavaScript console, network throttling, and SEO analyzer. * Network Throttling: Emulate Slow 3G and Offline states for comprehensive site testing under poor connections. * Touch Mode Simulation: Trigger authentic swipe and tap events for mobile website responsive testing. * Marketing Mockup Generator: Snap instant screenshots and create high-res transparent designs for your responsive check reports. * Dark/Light Mode Toggles: Force color scheme preferences without changing OS settings. ### Device Preview Across Every Possible Device & Viewport Simulate and preview how your web pages render on every possible device screen size— from mobile screens to 4K desktop displays. * Device Preview Presets: Check site layouts across smartphones like iPhone 16 Pro, iPhone 15 Pro, Samsung Galaxy S22, and Google Pixel. * Tablet & Laptop Viewports: Review tablet views including iPad Pro, Galaxy Tab, and laptop screen formats for complete website responsive auditing. * Custom Device Sizes: Enter any custom width and height values to test and analyze your site in every possible device resolution. * Orientation Toggles: Switch between portrait and landscape orientation with a single click to verify responsive layout flow. * Custom Profiles: Save custom device profiles to your personal library for quick access during future site 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 for site testing. * 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 for a responsive check. * Review how your layout responds at critical structural transition points. ### Visual Regression and Layout Site Testing 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 & Website Responsive Debugging Access a suite of advanced developer tools designed specifically to help developers troubleshoot complex front-end issues and perform site testing. * 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 during your site testing workflow. * 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. ## 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 Controls1. Main workspace showing the mobile device preview.⌉⌊User Access Controls1. Main workspace showing the mobile device preview.⌉[ User Access Controls1. Main workspace showing the mobile device preview. ## 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 check and viewport site testing tool? Click the Device Preview button in your admin bar. You can also use the Ctrl+Shift +D shortcut. ### Can I use developer tools and site testing to analyze website responsive layouts? Yes. You can load multiple viewports side-by-side with synchronized scrolling, run accessibility audits, and use built-in developer tools. ### 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 a responsive check? Yes. You can take screenshots of single viewports or all viewports at once. ### How do I perform a site testing 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 – Device Preview, Developer Tools & Site Testing” 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, Developer Tools & Site Testing” 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 **3 days ago** * Active installations **Fewer than 10** * WordPress version ** 5.0 or higher ** * Tested up to **7.0.2** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/frank-responsive-checker/) * Tags * [developer-tools](https://twd.wordpress.org/plugins/tags/developer-tools/)[device preview](https://twd.wordpress.org/plugins/tags/device-preview/) [responsive](https://twd.wordpress.org/plugins/tags/responsive/)[responsive check](https://twd.wordpress.org/plugins/tags/responsive-check/) [testing](https://twd.wordpress.org/plugins/tags/testing/) * [Advanced View](https://twd.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/)