Seja na hora de criar o Wireframe, Design ou na hora da codificação, o Google Chrome possui extensões que facilitam e muito o processo criativo e de desenvolvimento de projetos web. A maioria das extensões que mencionaremos aqui, são implementáveis tanto no Google Chrome como o Firefox.

O QUE VOCÊ ENCONTRARÁ AQUI?
ColorZilla
HTML5 Outliner
Page Ruler Redux
WhatFont
Window Resizer

Essa extensão adiciona um conta-gotas ao seu navegaor, muito prático para obter a cor de qualquer elemento de um site, assim, se você viu uma determinada cor que achou incrível em um site e quer utilizar em seu projeto, com essa extensão, você poderá ver qual é o código hexadecimal e rgb daquela cor para aplicar em seu projeto.

 Além do conta-gotas, ele tem disponível:

• Gerador de código CSS para criar o estilo gradiente;
  Histórico de cores;
  Exibe informações de elementos como o nome da tag, classes, id, etc.;
  Entre outros.

Page Ruler Redux

Na hora de criar o Wireframe ou Design dos seus projetos, é comum utilizarmos outros sites como referencia. Provavelmente nessa hora, você poderá querer saber qual o tamanho de um botão no site, qual é a altura do header ou o tamanho de um ícone.

 Com essa extensão você poderá checar o tamanho dos elementos de um site, seja através do recurso com mão livre ou com a opção de seleção de elementos, onde ele irá auxilia-lo a inspecionar os valores de height e wight de uma forma muito prática.

WhatFont