PixelTool - Devtools extention

Installation

You can install the extention from the chrome store here: https://chrome.google.com/webstore/detail/pixeltool/kpgeilokejebggfnjfkpidabbfmpidjf Or you can install it at chrome://extensions/ locally using ‘Load unpacked extension’ and pointing it to the cloned folder.

Description

Allows you to overlay a design to improve the precision of frontend development

Overlay a design on a webpage for pixel perfect development.

This extension comes with an easy to use UI thats sits out of the way as a devtools panel. It allows a developer or designer to add a transparent image over real HTML in order to achieve pixel perfect accuracy.

Features

  • Adjustable opacity.
  • Sits out of the way in Dev-tools panel
  • Easy to use UI
  • Real time opacity and positioning for images

Usage

  • Open Dev-tools, a new panel called PixelTool will be created, select this.
  • Upload the image you wish to overlay.
  • Click Overlay image.
  • Adjust the X and Y axis and the opacity in real time.

By Spencer Walden @ www.spencer-walden.com