wgrivera

<p>A debugging tool that adds a small badge in the corner of the site, showing the current viewport width and height for finding media queries breakpoints and testing responsive website.</p>
<p>Works in real-time, so resizing the browser will also trigger an update to the screen dimensions.</p>
<p>The viewport reporter can be activated or deactivated by enabling or disabling the plugin.</p>


WP Viewport

A debugging tool that adds a small badge in the corner of the site, showing the current viewport width and height for finding media queries breakpoint …

zish

fkfaisalkhan007

Sharik Khan

Pathhan

mohammadhanif

Alexander

FARAZFRANK

A WP Life

<p>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.</p>
<p>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.</p>
<p>How this plugin works: <a href="https://wpfrank.com/how-to-use-frank-responsive-checker/" rel="nofollow ugc">Check Docs</a></p>
<h3>Key Features List</h3>
<ul>
<li>13+ Device Presets: Test on modern smartphones, tablets, and desktop displays.</li>
<li>Automatic Breakpoint Detection: Scan your CSS to find and jump to active media queries instantly.</li>
<li>Visual Regression Testing: Save baseline layouts and use comparison sliders to catch pixel shifts.</li>
<li>Side-by-Side Comparison: View multiple devices at once with fully synchronized scrolling.</li>
<li>Accessibility Scanner: Audit WCAG color contrast, missing alt tags, and test keyboard focus maps.</li>
<li>Advanced Developer Tools: Built-in DOM inspector, JavaScript console, and SEO analyzer.</li>
<li>Network Throttling: Test performance and loading states with Slow 3G and Offline emulation.</li>
<li>Touch Mode Simulation: Trigger authentic swipe and tap events for mobile interactions.</li>
<li>Marketing Mockup Generator: Snap instant screenshots and create high-res transparent designs.</li>
<li>Dark/Light Mode Toggles: Force color scheme preferences without changing OS settings.</li>
</ul>
<h3>Comprehensive Device Preview and Viewport Testing</h3>
<p>Simulate how your web pages render on popular mobile screens, tablets, and desktop monitors instantly.</p>
<ul>
<li>Test layouts across modern smartphones like the iPhone 15 Pro, Samsung Galaxy S22, and Google Pixel.</li>
<li>Review tablet views including iPad Pro and Galaxy Tab formats.</li>
<li>Toggle between portrait and landscape orientation with a single click to verify responsive flow.</li>
<li>Enter custom width and height values to test any specific viewport size not included in the presets.</li>
<li>Save your custom device profiles to your personal library for quick access during future testing sessions.</li>
</ul>
<h3>Automatic CSS Breakpoint Detection</h3>
<p>Never guess where your design breaks again. The built-in breakpoint scanner automatically reads your active stylesheet and extracts all media query breakpoints.</p>
<ul>
<li>Automatically detect and list all CSS breakpoints used on the current page.</li>
<li>Click any detected breakpoint to instantly snap the viewport to that exact width.</li>
<li>Review how your layout responds at critical structural transition points.</li>
</ul>
<h3>Visual Regression and Layout Comparison</h3>
<p>Identify pixel-level changes and layout shifts using advanced visual comparison tools.</p>
<ul>
<li>Establish a baseline screenshot of your current layout to serve as a reference point.</li>
<li>Use the visual comparison overlay slider to detect exact differences between your baseline and new code changes.</li>
<li>Load multiple device frames side-by-side to examine layout consistency across different screen sizes.</li>
<li>Synchronize scrolling across all active comparison panels to inspect lengthy pages effortlessly.</li>
</ul>
<h3>Web Accessibility Audits (WCAG Compliance)</h3>
<p>Ensure your website is accessible to all users by running automated accessibility tests directly on your live pages.</p>
<ul>
<li>Perform WCAG contrast checks to verify that text remains readable against background colors.</li>
<li>Scan the document for images missing alternative text attributes to improve screen reader compatibility.</li>
<li>Visualize the keyboard navigation flow with numbered focus map badges.</li>
<li>Simulate screen reader output to understand how visually impaired users experience your content.</li>
</ul>
<h3>Advanced Developer Tools and Debugging</h3>
<p>Access a suite of advanced features designed specifically to help developers troubleshoot complex front-end issues.</p>
<ul>
<li>Network Throttling: Simulate Slow 3G or Offline network conditions to test page resilience and loading states.</li>
<li>Touch Mode Emulation: Simulate true mobile touch events like swipes and taps while hiding the desktop cursor.</li>
<li>Design Mode: Enable content editing directly within the viewport to test copy changes without modifying your database.</li>
<li>SEO Analyzer: Scan page meta tags, heading structures, and essential SEO attributes instantly.</li>
<li>Color Scheme Emulation: Force system dark or light mode preferences to test CSS media features.</li>
<li>Dedicated Code Inspector: Open a built-in DOM inspector and JavaScript console specifically for the simulated viewport.</li>
</ul>
<h3>Instant Screenshots and Mockup Generator</h3>
<p>Generate professional marketing assets and visual bug reports with one click.</p>
<ul>
<li>Capture high-fidelity PNG screenshots of the current viewport.</li>
<li>Use the batch capture feature to automatically snap screenshots across multiple popular devices simultaneously.</li>
<li>Export designs with transparent backgrounds or custom solid colors using the Mockup Generator.</li>
</ul>


Responsive Checker – SEO and Developer Tools, Device Testing & Mockups

Test website layouts with device preview and viewport tool. Check website accessibility, take screenshots, and run comparisons.

WP Viewport vs Responsive Checker – SEO and Developer Tools, Device Testing & Mockups