Pixel perfect layout

I am a web developer with 2 years of experience working in firefox with firebug. I’m using Pixel-perfect technique. Why?

  • A page is created faster than when you run between the browser and the PSD.
  • The result is much better, from which your client is delighted there is nothing to complain about.
  • It is trite more convenient to see the layout and immediately position the element under it.

I used to post an image with HTML code. But how inconvenient to select an element in firebug if the image is on top of everything. Every time I had to go into styles and hide the picture. The pixel-perfect plugin for firefox for some reason did not work.
Then the idea came up to create a script that will hide by short-cut (hotkey) -th image. And while creating the script, new ideas appeared for the modernization of usability. In the end it turned out: Pixp
After creation, I was able to test it on only one live project, so that bugs are possible, and since this is my first public project for everyone, please do not judge strictly. However, it has been quite a while since I left for the back end, and my friends typesetters continue to work using this script.
For me personally, the layout process has become much more convenient. And to prove to the client that this element is located correctly is now easy. Since your client can also use the script without installing add. BY.

In short:
When creating a new project, you will need to include a script, and do not forget to delete it upon delivery.
After connecting, you need to create a folder or specify in the dialog box the name of the folder where our picture is located, or immediately direct url. I use '.ajax' with cross-domain disabled. So the pictures need to be stored on the same domain as the site.

Next, you can adjust the positioning and transparency of the picture as you want it.
The script saves each manipulation of the image in a cookie, running through the pages of the site will not need to configure everything again.
When creating the script, I imagined how the developer would switch to another page and see the design of the previous page, then the idea came up to create layouts. Using hotkeys, you can quickly change the image corresponding to the current page of the site.
The last convenient feature so far has become the 'Hover mode', the picture hides automatically if you try to select an element by the inspector, and is displayed again.
All hotkeys are here :
P.S. I wrote the script primarily for myself and friends. Friends approved and said shared with everyone. Here I am sharing.
I hope it will be useful to you.