User Manual
Use DiffPixel to compare a live page with local reference images directly in the browser. The floating panel controls layers, opacity, position, scale, blend modes, and a grid.
1. Open DiffPixel
- Open the web page you want to inspect.
- Click the DiffPixel extension icon in Chrome.
- The floating panel appears inside the page.
- Click the extension icon again to hide or show DiffPixel for that site.
Some Chrome pages and restricted browser pages cannot run extensions. This is a browser limitation.
2. Add Reference Images
- Click Add to choose one or more image files.
- Drag and drop images onto the panel.
- Copy an image and press paste on the page, or click Paste in the panel.
Layer list
Use the controls on each layer to reorder, lock, hide or show, and remove it. Select a layer to edit its detailed settings.
3. Adjust a Layer
- Name: rename the selected layer.
- Blend: choose Normal, Invert, Difference, Multiply, Screen, Overlay, Hard Light, or Exclusion.
- Opacity: adjust transparency with the slider or percentage input.
- X / Y: move the layer by pixels.
- Scale: use the minus/plus buttons, 0.50x and 2.00x presets, or the input field.
- Reset / Center / Fit W: quickly restore, center, or fit the layer width.
4. Grid and Themes
Turn on Grid to check spacing and alignment. The pixel size input stays visible so the grid can be prepared before enabling it.
Use the sun or moon button to switch the panel between light and dark themes. Use the language menu to choose Auto, English, or Japanese.
5. Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Move selected layer by 1px | Arrow |
| Move selected layer by 10px | Shift + Arrow |
| Change blend mode | Alt + B, then ; / - |
| Adjust opacity | Alt + A, then ; / - |
| Toggle grid | Alt + G |
| Toggle layer visibility | Alt + H |
| Toggle layer lock | Alt + L |
| Scale to 0.50x / 2.00x | Alt + , / Alt + . |
| Adjust scale by 0.1 | Alt + ; / Alt + - |
| Reset / Center / Fit width | Alt + 0 / Alt + C / Alt + W |
6. Saved Settings and Site Access
DiffPixel saves layer settings, panel settings, and whether DiffPixel is shown for the current site locally on your device.
When DiffPixel is enabled for a site, the panel is restored after page reloads and when you open another page on the same host. Click the extension icon again to hide DiffPixel for that site.
For local file:// pages, enable Allow access to file URLs on the extension details page in Chrome.