Responsive Checker – Device Preview, Developer Tools & Site Testing

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

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.