We are currently in the open beta phase. Each update introduces more polished functionalities, loaded with extra features.

Thank You for Installing our extension!

We want to help you jump into work quicker, so we’ve compiled some quick tips to help you navigate and start your experience smoothly.

Panes

Add new Pane

The extension starts with a default responsive pane. To add more, simply click the “+” icon. You can select from available presets, create your own for customized testing, or add another responsive pane

Inspect

Inspect anything, measure everything

Inspect Mode gives you powerful tools to analyze and modify elements on a page. You can check CSS styles, add custom CSS, measure distances between elements, and download images.

Edit

Edit any text, replace any image

Edit any text or image on the web and instantly see how it changes across all devices

User Agent Strings

Mimic Real Devices

Easily switch between user agent strings to emulate real devices. You can select from our preset options or add your own custom user agents to see how your website performs across different devices.

X-Frame-Options

Header Bypass

Some websites prevent content from loading in iframes due to X-Frame-Options settings. Use our extension to bypass these restrictions and view the content within an iframe, ensuring you can fully test and interact with embedded pages.

See What’s Changed

We’re constantly improving Pixefy. Check out the latest features and updates we’ve added

New
Improvement
Fix
This release brings Grid Layouts to Pixefy, plus key improvements to Inspect Tool, Activity Tab, and the Measurements Widget – all based on your feedback.
New
Improvement
Fix
This update brings powerful accessibility tools like blindness simulation and color contrast view, plus a remade Inspect panel and key bug fixes.
New
Improvement
Fix
This update brings smarter styling suggestions, UI improvements, and the ability to see contrast ratio for any selected element.
See more in our
Changelog

Explore All Features

We’ve implemented a wide range of features, with more exciting updates on the way. Stay tuned!

Have ideas or feedback?
Developer Tools
Measure Spacing Between Elements

Select one element, hover another, and instantly measure pixel distances between them.

Developer Tools
Edit Element CSS Styles

Inspect and edit styles applied to any element directly in the Inspect Tool.

Extension Settings
Reset Pixefy Extension

Clear cached data and refresh Pixefy to reset your workspace or fix unexpected issues.

Developer Tools
Track All Changes

Log and review all CSS edits in the Activity Tab for easier debugging and testing.

Screens & Devices
Custom Screen Flow Layouts

Stack screens horizontally (scroll sideways) or vertically (scroll down with one or two per row).

Screens & Devices
Custom Screen Order

Rearrange screens in your workspace by dragging and dropping to customize order and workflow.

Screens & Devices
Zoom All Screens Together

Zoom in or out on all screens at once for synchronized scaling and easier workspace management.

Developer Tools
One-Click Asset Downloader

Download images, SVGs, PNGs, and other assets directly from webpages with one click.

Developer Tools
Simplified DOM Viewer

See a simplified DOM tree for faster, clutter-free element inspection and debugging.

Accessibility Tools
WCAG Contrast Testing

Check text and background color contrast ratios for WCAG accessibility compliance.

Accessibility Tools
Color Audit Tool

Extract all colors from a website and preview them in a complete palette for design and accessibility testing.

Accessibility Tools
Blindness Simulation

Simulate different blindness conditions to evaluate and improve your website’s accessibility.

Developer Tools
Responsive Layout Grid System

Create responsive grids with custom columns, rows, and visibility rules to test layouts across breakpoints.

Layout Debugging
Responsive Scrollbar Control

Show or hide scrollbars at selected breakpoints to test overflow handling and design alignment across responsive layouts.

Responsive Testing
Split Screen View

Interactively resize two screens with one handle – as one screen shrinks, the other expands, giving dynamic control for breakpoint testing.

Screens & Devices
Custom Screen Presets

Create and save reusable screen presets in Screen Mode. Perfect for managing custom breakpoints and design system consistency.

Extension Settings
Internal Local Storage

Pixefy automatically saves your presets, layouts, and settings locally, restoring them every time you reopen the extension.

Screens & Devices
Screen Orientation Switch

Easily switch between portrait and landscape mode on any screen to test layout responsiveness and orientation-based design changes.

Screens & Devices
Toggle Screen Sync

Quickly enable or disable sync between screens to control whether they scroll and respond together or separately.

Screens & Devices
Mirror Events on All Screens

Scroll, click once – all synced screens respond together for efficient multi-device behavior testing.

Screens & Devices
Real Device Resolutions

Test your site using real device resolutions to simulate how your design renders on popular phones, tablets, and desktops.

Screens & Devices
Popular Device Resolutions

Access a list of the most popular resolutions by category (mobile, tablet, desktop) to test the most relevant breakpoints faster.

Developer Tools
X-Frame-Options Header Toggle

Enable loading of iframe-blocked pages by toggling the X-Frame-Options response header directly in Pixefy.

Interface
Adjust Screen Zoom Level

Zoom in and out of screens for detailed inspection, better workspace control, or pixel-perfect design checks.

Developer Tools
Edit Computed CSS Values

Edit computed CSS values live in Pixefy to debug styles, tweak spacing, and test changes instantly across breakpoints.

Developer Tools
Side-by-Side Element Preview

Select one element and hover over another to view a real-time popup comparison for layout, spacing, and styling checks.

Developer Tools
CSS Property Viewer

View grouped CSS properties in the Inspect Tool, organized by type for faster, cleaner style inspection.

Developer Tools
X-Ray Mode

Visualize hidden element boundaries, spacing, and layers with X-Ray mode for faster debugging.

Extension Settings
Night-Friendly UI Mode

Switch Pixefy to a dark theme for reduced eye strain and better focus during long or late-night testing sessions.

Screens & Devices
Screenshot Any Screen Instantly

Capture full-page, visible, or custom-area screenshots for any screen – perfect for QA, design review, and sharing layouts.

Developer Tools
Replace Images Instantly

Replace images directly in Pixefy to preview layout changes, proportions, or alternate content instantly.

Developer Tools
Box Model Preview in Inspector

View a live box model preview (margin, border, padding, content) directly in Inspect Tool mode.

Developer Tools
Replace Text Instantly

Replace text directly in Pixefy to test copy variations, label changes, or layout responsiveness in real time.

Developer Tools
Live Viewport Measurements

A live widget showing browser width and height as you resize – works even when Pixefy isn’t open.

Screens & Devices
Simulate Browser & Device Agents

Switch user agent strings to simulate different devices, browsers, or bots for accurate compatibility and responsive testing.

Developer Tools
Live Text Count in Content Edit

See live character and word counts while editing text directly in Pixefy.

Extension Settings
Clean & Simple UX

A simple, intuitive UI designed to make responsive testing fast, clear, and accessible for all users.