Dian8Dian Tools
PerfectPixel by WellDoneCode (pixel perfect)

PerfectPixel by WellDoneCode (pixel perfect)

Drop your mockup on the live page for pixel-perfect comparison with your code.

Developer toolsDesign toolsChromeEdgeFirefox
PerfectPixel by WellDoneCode (pixel perfect) cover

Screenshots

1 / 5
PerfectPixel by WellDoneCode (pixel perfect) cover
PerfectPixel by WellDoneCode (pixel perfect) — official Chrome Web Store product screenshot 1

What PerfectPixel by WellDoneCode (pixel perfect) does

PerfectPixel by WellDoneCode (pixel perfect), published by Ilya Stepanov, is listed for Chrome. The developer describes its purpose as “Drop your mockup on the live page for pixel-perfect comparison with your code.” This guide brings together the documented features, installation entry points and compatibility details so you can decide whether it fits your task.

Documented features

The official listing documents the capabilities below. Compare the functions you need with the available platform and paid-feature information before installing. These are the developer’s descriptions, not independent performance or security test results.

  • “Position and scale the overlay, then adjust opacity to compare.”

  • “Overlay any PNG, JPG, or SVG on any web page”

  • “Adjustable opacity for real-time visual comparison”

  • “4 blend modes (Difference, Invert, Multiply, Overlay) plus Normal — each useful for catching different types of mismatches”

  • “Mobile designs in DevTools device mode: move PerfectPixel to the browser's side panel, so the viewport stays clear”

  • “Per-domain persistence: your layers stay saved per site and restore automatically across browser sessions”

  • “Multiple layers per domain”

  • “Scaling, repositioning, and centering controls”

Installing and opening PerfectPixel by WellDoneCode (pixel perfect)

Open the Chrome Web Store link, confirm PerfectPixel by WellDoneCode (pixel perfect) and the publisher Ilya Stepanov, then select Add to Chrome. Read the requested permissions before confirming. After installation, Chrome’s Extensions menu provides access to the extension; pinning its toolbar icon is optional. To disable or remove it later, use Chrome’s Manage Extensions page.

The manifest declares a toolbar action. Use its toolbar entry to open the extension’s action. An options page is declared; open the extension’s details in Manage Extensions to access its settings.

Using the documented workflow

Start with the operation that matches your task. The following actions are documented in the official listing; they are separate usage options, not a sequence that every user must complete. For controls not named here, consult https://www.welldonecode.com/perfectpixel rather than assuming a particular button or menu exists.

  • “Lock the overlay to click through it and interact with page elements underneath”

  • “How it works: install the extension, open any page, and drop in an image — drag and drop, paste a URL, paste from clipboard, or use the file picker.”

Platforms, version and interface languages

Verified store editions: Chrome, Microsoft Edge, Firefox. The captured Chrome version is 3.2.0.2, updated 2026-09-28. Version numbers and feature availability can differ between stores. Use the corresponding official store button; a browser sharing Chromium is not evidence of a separate official store edition.

The official store lists 3 interface languages. The supported-language tags on this page come from that product metadata; they are separate from the eight languages available for this guide. Check the current store if a particular language is essential to your workflow.

Price and paid features

The developer describes a free tier, trial or free version alongside paid features. Check the official website for the current feature limits and price in your region. Installing the browser package and subscribing to a connected service are separate actions; a browser-store button alone does not establish which paid features are included.

Permissions, privacy and practical limits

The published extension manifest lists these API permissions: activeTab, scripting, sidePanel, storage, unlimitedStorage. These are declared capabilities, not proof of what data the developer actually collects. Review Chrome’s installation prompt and the developer’s privacy policy (https://www.welldonecode.com/privacy/) before granting access.

Chrome’s extension details let you inspect site access and disable the extension. If an expected control does not appear, check that the extension is enabled and that the current site is one supported in its description. Do not extend access to every site merely to troubleshoot a single website.

Questions about PerfectPixel by WellDoneCode (pixel perfect)

Where is the official download? Use the Chrome Web Store button for the exact listing referenced in this guide: https://chromewebstore.google.com/detail/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en. For other verified platforms, use their separate store buttons. This page does not distribute installation packages or modified copies.

Where should I look if a feature has changed? Compare the current store version with 3.2.0.2, then check https://www.welldonecode.com/perfectpixel. The store screenshots show the supplied product imagery, but later releases and device layouts may differ. Use the official support channel for account, billing and product-specific issues.