dkaagdgjmgdmbnecmcefdhjekcoceebi
Drop your mockup on the live page for pixel-perfect comparison with your code. PerfectPixel adds a semi-transparent image overlay on top of any web page, letting you compare your frontend implementation against the original design mockup directly in the browser. Upload a design comp, adjust opacity, and immediately see where your code diverges from the spec — with pixel-perfect accuracy. No more switching between tabs or squinting at two screens side by side. 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. 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 - Lock the overlay to click through it and interact with page elements underneath - Per-domain persistence: your layers stay saved per site and restore automatically across browser sessions - Multiple layers per domain - Scaling, repositioning, and centering controls - Keyboard shortcuts for common actions - Unlimited simultaneous layers (free tier supports 2) - Folders to group layers - Layer rotation - Dark theme - Custom icon, accent color, and custom CSS Built for frontend developers, QA engineers, agencies, and development teams who need to verify that what they shipped matches what was designed. 350,000+ developers. 10+ years on the Chrome Web Store.
Page Ruler
Measure page elements size in pixel with an easy-to-use ruler. Page Ruler is an extension that lets you measure distances (in pixels) on a webpage. It draws a rectangular ruler when you move your mouse on the page. The ruler has width, height, start and end all labeled with corresponding metrics in pixels. When you move your mouse, the rectangle changes its size and all the numerics are updated. To activate the addon please press the toolbar button once. Likewise, to disable the addon please press the toolbar button again. This addon works with mouse clicks in desktop machines. For touch-enabled devices, you can work with touch to draw the rectangle within the page. If you have a feature request in mind or found a bug to report, please fill the bug report form on the addon's homepage (https://mybrowseraddon.com/page-ruler.html).
MobX Developer Tools
Dev-tools for MobX and React Inspect mobx-react observers. Edit values in observable objects (Doesn't support editing react props/state, use react-devtools for that) Track changes in MobX observables MST support
PixelParallel by htmlBurger
PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers PixelParallel is a completely free, super handy and light HTML vs Design comparison tool for front-end developers that will help you code pixel perfect websites with ease. Built from developers to developers, PixelParallel is a tool working in favor of the ultimate precision in front-end coding. How it works: 1. Simply upload your image and compare the semi-transparent overlay with the web page below. 2. Customize the opacity, scale and position of the image as you wish. You can also hide it or lock it. 3. Perform color difference for a strong pixel perfect precision. 4. Use the vertical and horizontal grids to achieve a pixel perfect web design. - Bootstrap grid with customizable width, number of columns, gutter and opacity - Horizontal lines with customizable space between - Draggable rulers (Photoshop-like) + Reset option - Inversion (Color difference) - Separate overlays for each web page - Overlay scaling - Customizable overlay opacity - Saving overlays between sessions - All image sizes supported - Draggable overlay - Quick hide / show image - Shortcuts + customizable keyboard hotkeys - Works with local files - Intuitive UI: clean and simple; draggable; minimizable PixelParallel does not collect any personal data. Uploaded images are saved locally in the browser storage.
Window Resizer
Resize the browser window to emulate various screen resolutions. This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order). You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport. The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer and more! Please report all bugs (or suggestions) using the support link on the extension's details page.
