preface

Pixel-level restoration is the most ideal state of page restoration for front-end engineers and designers. Today, I introduce a browser extension to help you achieve pixel-level restoration: PerfectPixel, a pixel-level reversion tool from WellDoneCode, is completely free and has experience-neutral ads. The principle is simple: You insert the design directly into the page, and there is always a standard reference value to help you restore the page at the pixel level during development. I think it is suitable for:

  1. Front-end engineer, using this plug-in can help you quickly find troubleshooting style problems, complete pixel level restore degree of interface writing;

  2. Designers & Testers & Products, for those of you with a “pixel eye”, this extension can help you check page restoration more accurately;

  3. Back end engineer, this extension helps you to quickly complete high restore static interface adjustment without the help of front end engineer.

The installation

In Chrome’s case, just search for PerfectPixel in the Chrome App Store and add it to Chrome.

The rest of the browser to install access website home page (http://www.welldonecode.com/perfectpixel/) you can see, the major browsers have support accordingly.

Use the -reducibility check

After installation, click the extension program icon in the webpage to be used to open the main interface, the top is the minimize and detailed Settings (hotkeys, etc.) button, the middle is the area to select the design drawing.

One possible problem is that if you open a local file protocol page, the program icon will turn gray and a prompt will pop up when you click on it.

The solution is to right-click the program icon and choose Manage Extensions and open the allow access to file urls option.

After clicking Add Your First Layer and selecting the design drawing, the program will insert the design drawing into the current page and switch to the function page. For multiple pages or pages with multiple states, we can upload multiple design drafts and quickly switch between multiple design drawings.

If the width of the design drawing is different from the width of the page, we need to adjust the scale of the design drawing. For example, the front end of the 750px design drawing will be developed according to 375px, so we need to adjust the scale to 0.5. We can also directly drag the design drawing with the mouse or adjust the position of the design drawing by using the function area fine tuning button. You can also adjust the transparency of the design.

Once you’ve done this, you should expect to see your page ginning like the one above, due to deviations between the page and the design. The messier the ginning, the worse it is to some extent.

To get a clearer picture of the restoration problem, click the Invert button in the lower left corner to enable the key function: Invert, and the page will look something like this.

As the complementary color, if the page is the perfect reduction design draft that you will see a gray, but if the page problem, the greater the reduction degree of grey will be less pure, and at the same time problem will be intuitive exposed, remove font rendering the differences because of different platform, other are not pure area can reflect some problems:

  1. The large area on the left is not gray, indicating that the overall background color of that area is not consistent with the design draft.

  2. In the middle, there is a large difference in the double shadow of the text, which can help us find the writing errors.

  3. The upper and lower gashes of the border are different, indicating that the size of this area is not set properly.

  4. The image glow-out is very large, indicating that there is a problem with the image proportion setting.

Use -reducibility correction

Once we have identified the problems, how can we solve them quickly? When we click on the Lock button in the lower left corner, the design will be locked, mouse operation will go right through design to the page, we can direct selection problem areas, then peace development adjustment style in the developer tools until ghosting minimized, then just change the style of the replacement to your code to complete reduction degree of correction, Taking the middle area as an example, the following images show what the page looks like before and after the modification.

    

How about it? The whole process is done quickly and in a very intuitive way, so if you’re hooked, use it right away.

Hope this tool, can improve your work efficiency and quality, to help you let their products to perfect another step 🙌🏻!