Esse é um tipo de post que tem menos texto que os demais, o fato é que uns dias atrás trabalhei como front-end (landing pages e newsletters) e isso me rendereu o conhecimento sobre umas extensões maneiras, me ajudaram demais e resolvi compartilhar.

Eu precisei testar em navegadores diferentes, então a lista é:

  • WhatFont (Safari, Google Chrome e Firefox ): uma extensão que indica o nome da fonte utilizada, tamanho, espessura, altura da linha e cor. Extremamente útil quando se tem muito css com propriedades se sobrepondo ou precisa validar o tamanho exato de tudo. Para Firefox a extensão é de terceiros não fazendo parte oficial do projeto, mas apresentando resultado semelhante;
  • Bootstrap - Responsive Helper (Firefox): apenas apresenta uma marcação na barra superior do Firefox indicando qual o tamanho do grid está sendo utilizado (xs, sm, md, ld, xl);
  • DevRuler (Firefox): uma régua na parte superior da página que pode ou não ter as marcações do grid do Boostrap, com a indicação do grid (xs, sm, md, ld, xl) e tamanho em pixels;
  • Bootstrap Grid Overlay (Google Chrome): ele cria uma camada superior no seu site usando Bootstrap, que permite visualizar (sem atrapalhar a navegação do site) o grid vertical desenhado na tela;
  • ColorZilla (Google Chrome): das suas utilidades a que mais utilizei foi a de clicar em algum ponto da tela e ele me fornecer a cor do pixel do local.

As extensões WhatFont e ColorZilla foram indicação do Patrick Fontenele.