19 Extensões do Chrome que Todo Web Designer Deve Usar

Se você não usa aplicativos ou extensões do Google Chrome para o seu trabalho on-line, a hora de começar é agora. Aqui estão uma variedade de extensões que podem tornar o design e o desenvolvimento mais limpo, mais eficiente e mais divertido.

1 – Web Developer

Às vezes, ao trabalhar, talvez seja necessário desabilitar JavaScript, ocultar imagens ou visualizar rapidamente o código-fonte. Esses poucos exemplos são apenas o começo do que a extensão para Google Chrome Web Developer pode fazer. Web Developer é um pacote all-in-one para desenvolvedores e sempre deve ser a sua primeira opção de extensão para Chrome.

2 – CSS Peeper

Outra extensão do Chrome para web designers, o CSS Peeper pode extrair código CSS aninhado em um site. Em vez de escavar e ter de inspecionar páginas atrás dos códigos CSS, você pode usar essa extensão para ver as propriedades de objetos, exportar recursos ocultos e muito mais.

Precisa de um editor CSS em vez de um extrator? Stylebot permite que você manipule o CSS diretamente no Google Chrome e até mesmo baixe estilos de outros usuários. Também tente Code Cola para uma experiência similar.

3 – Explain & Send Screenshots

Já passou pelo pesadelo que é capturar uma página inteira? Ou gastou muito tempo com a ferramenta de captura e recorte? Explain & Send Screenshots é uma extensão essencial que permite você a capturar páginas web de qualquer tamanho, marcar explicações, circular itens e apontar setas de forma rápida e simples. Explain & Send Screenshots conta com recursos avançados como subir automaticamanete sua captura de tela para o imgur.

4 – ColorZilla

ColorZilla é uma entensão simples mas essencial para designers e web designers. O recurso principal é o seletor de cores, que pode pegar uma cor em qualquer página ou elemento da Web e dar-lhe o código RGB / Hex / etc. Outras características básicas incluem o seletor de cores e editor, gerador de gradiente e visualizador de paleta. Este é inestimável para aqueles que precisam tirar as cores dos sites rapidamente.

5 – Browserling

Quando você está desenvolvendo um website, é necessário testar seu site em outros navegadores e dispositivos para garantir que não haja erros ou inconsistências, mas não seria mais fácil se você tivesse que usar apenas um plugin para fazer tudo isso? Browserling permite fazer exatamente isso, economizando o tempo de iniciar e carregar um segundo navegador ou ter de usar outro dispositivo para testar a interoperabilidade do seu website.

6 – WhatFont

Não há nada mais irritante do que ver uma fonte bonita e não ter idéia e nem como descobrir seu nome. Para nossa sorte e tranquilidade, a extensão WhatFont pode ser usada para identificar a família de fonta, tamanho, tipo e até mesmo quem a esta fornecendo como por exemplo Google Fonts API ou Adobe Typekit.

Se você encontrar uma fonte que você goste, mas não tem certeza se funcionará no seu site, tente o Google Font Previewer para ver como esta fonte se comporta antes de fazer qualquer alteração.

7 – Gallerify

Precisa extrair um monte de imagens de uma página? Gallerify é a extensão certa para isso. Pegue todas imagens de fundo, use o Gallerify para pesquisar para encontrar imagens nas páginas de um website, faça o download de alguns várias imagens ao mesmo tempo. Não perca mais tempo caçando imagens, pare de ficar inspecionando código fonte e folhas de estilo CSS atrás as imagens escondidas.

8 – Window Resizer

É imperativo garantir que seu site seja receptivo em dispositivos móveis, especialmente se você estiver desenvolvendo uma loja online. Muitos programas de criação de sites vêm com um testador responsivo, mas se você quer resultados mais rápidos ou não tiver acesso a essas ferramentas, experimente o Window Resizer. Você poderá testar múltiplas resoluções de telas, incluíndo smarthphones e tablets sem nem mesmo ter de arrastar a janela do seu navegador.

9 – PerfectPixel

É muito frustrante quando o resultado final do seu site não se parece nada com o que você havia projetado ou imaginado. PerfectPixel permite você sobrepor uma imagem sobre uma página que esteja acessando enquanto você navega, visualizar ambas com o recurso de transparência.

10 – Web Developer Checklist

Seu site está realmente completo para publicação ou lançamento? está carregando rapidamente, não possui links quebrados e está seguro? Antes de lançar seu site para a world wide web use a extensão Web Developer Checklist para garantir que todos os pontos antes do lançamento do website foram atendidos.

11 – Highly Highlighter

Precisa marcar uma área para voltar mais tarde ou fazer alguma pesquisa? Highly permite salvar e compartilhar seus destaques na página web, então nunca mais esquecer em qual parte do artigo ou página você havia parado. Tente também o Evernote Web Clipper para uma função parecida.

12 – Check My Links

Não há nada pior do que ter que passar por uma página cheia de links, procurando cuidadosamente links quebrados. Com a extensão Check My Links você poderá realçar claramente os redirecionamentos com problemas e parar de gastar seu tempo com horas de navegação entre todos as páginas dos seus projetos atrás de possíveis links quebrados.

13 – Page Ruler

Quando você precisar medir a distância de dois elementos em uma página web, tente a extensão Page Ruler. Não existem firulas nesta entensão, o que é excelente. Basta escolher uma cor e arrastar uma caixa entre os elementos que você quer medir.

14 – Pesticide

Se você precisa de um depurador CSS rápido, experimente o Pesticide for Chrome. Ele permite que você veja a localização dos elementos CSS na página. Embora seja muito simples, você pode achar útil para o desenvolvimento de front-end.

15 – Data Saver

Ser um web designer mas possuir um plano de dados de internet limitado pode ser um pesadelo! Todas estas imagens, downloads, extensões… podem ser gigas de downalod em um dia! Data Saver busca otimizar os sites que você visita para que você use menos dados ou franquia da sua internet. Ele também informa quais páginas estão usando muita transferência de dados. Mas gostaria de deixar claque de que esta extensão não faz mágica, mas é melhor que nada.

16 – PHP Ninja Manual

Quem nunca esqueceu aquele comando ou função básica do PHP uma vez na vida? PHP Ninja Manual ajuda a reduzir as pesquisas no Google atrás de informações de documentação do PHP. Basta abrir o extensão e procurar o que precisa. Menos tempo buscando, mais tempo programando.

17 – RescueTime

Se você é como a maioria dos designers ou desenvolvedores freelance, você sabe que é muito fácil perder tempo. Um minuto que você está codificando ou projetando, e o próximo, você está assistindo vídeos de gatinhos (ou de rato tomando banho) no YouTube.

A extensão RescueTime não tentará motivá-lo ou corrigir seus hábitos, mas isso lhe dirá os fatos frios e duros sobre quanto tempo você gasta no Facebook em vez de trabalhar.

18 – Clear Cache

Há momentos em que você precisa limpar seu cache e cookies, mas navegar para as configurações do Chrome é tedioso demais. Clear Cache permite apagar o seu cache, bem como os cookies de navegação globais ou locais com um clique do botão.

19 – Spectrum

Como designer, você pode querer tornar as suas páginas amigáveis às cores, especialmente se envolver gráficos, dados e outras mídias. As deficiências de cor de todos os tipos são comuns o suficiente para valer a atenção, e se alguém visitar um site e ver uma confusão de cores indistinguíveis, eles irão rapidamente sair.

O Spectrum permite que você simule uma variedade de deficiências de visão de cores, incluindo a mais comum, o dautonismo.