Você sabia que existem várias extensões do Chrome, certo?
Mas você imaginava que existissem extensões do Chrome que ajudaria a melhorar a produtividade de quem trabalha como desenvolvimento de sites?
Para um web designer e/ou desenvolver web, as primeiras ferramentas que vem em suas mentes são Photoshop, Illustrator, XD, Muse, Dreamweaver entre outros.
Mas o fato é que existem várias extensões do próprio Chrome que vão ajudar você a ganhar tempo para se dedicar a criação. São várias extensões interessantes e leves. Cada uma com objetivos interessantes.
Nesta lista eu separei as 10 extensões que eu mesmo utilizo como apoio nas tarefas do meu dia a dia como web designer. Olha só:
Web Developer
O Web Developer é uma extensão bem completa para quem gosta de analisar praticamente tudo de sites (próprios e dos outros). Ele possui mais de 100 funcionalidades distribuídas entre os elementos principais de sites: CSS, imagens, formulários, tamanhos de telas, tools entre outros.
O que achei fantástico nesta extensão é a possibilidade de encontrar erros de validação de HTML, CSS, links etc. Ele te emite um relatório em tempo real. O que possibilita identificar e aplicar melhorias instantaneamente.
Na imagem acima você também pode conferir uma ferramenta de grid. Muito bom verificar alinhamento de conteúdo. No Resize é possível abrir uma tela e visualizar o site em diferentes resoluções, ideal para quem trabalha com sites responsivos.
A extensão oferece muitas funcionalidades e caberia um curso completo só para ensinar você a usar. Então, a melhor dica é: instale e veja com seus próprios olhos.
CSS Peeper
Outra extensão fantástica é o CSS Peeper. O design simples dele já impressiona quando você abre a extensão, informando para você o tamanho do arquivo CSS e o tempo de carregamento.
E basta um clique em cima de algum elemento de qualquer site para você descobrir a família da fonte, tamanho e o código de cada cor utilizada naquele elemento ou página.
Outro lance simplesmente fantástico do CSS Peeper é a função assets. Ele separa todas as imagens do site (de qualquer site), possibilitando inclusive que você faça o download de todas as imagens da página em formato .zip (ou pode baixar separadamente também).
Para quem é webdesigner, facilita muito na hora de se inspirar e principalmente na etapa final de revisão do site, verificando se todos os elementos estão com a fonte correta, cor e tamanho.
Awesome Screenshot
Talvez você já utilize a extensão Full Page Screen Capture para capturar em formato de imagem um site inteiro. Sem precisar tirar um print, baixar a tela, tirar outro print etc. Mas o Awesome Screenshot é muito mais completo.
Além de ter essa funcionalidade de print de tela inteira, ele também possibilita outros tipos de prints. Com a grande vantagem de você poder inserir texto, pintar, grifar e adicionar outros elementos daquele print.
Agora, preste bem atenção.
Outro lance muito útil e simplesmente incrível do Awesome Screenshot é a possibilidade de fazer gravações da tela e exportar em formato WebM, um padrão de vídeo aberto e de alta qualidade, sendo comumente usados para entregar vídeos online usando a tag HTML5.
Na versão gratuita da extensão é possível fazer gravações com no máximo 30 segundos, podendo ser aumentado com o pagamento. Eu não cheguei a verificar valores porque acredito que 30 segundos é tempo suficiente para um vídeo para web.
Browserling
O Brownserling é uma interessante ferramenta para você testar o seu site em diferentes navegadores (FireFox, Safari etc) e sistemas comuns (Windows e Android), identificando se existem diferenças e erros de um navegador/sistema para outro.
É recomendável que você utilize ele para garantir que não haja erros ou inconsistências, ao invés de ter vários navegadores instalados no seu computador e testar manualmente cada um deles.
Simplesmente indispensável.
WhatFont
Para, para, para tudo! Uma das coisas que mais deixa um profissional de designer frustrado é quando nem ele e nem o cliente sabem o nome daquela fantástica fonte que o site X utilizou. Isso atrasa muito a vida do designer. Ou melhor, atrasava.
A extensão do WhatFont para o Chrome permite que você identifique de forma rápida e prática o nome da tipografia, a família, o estilo, grossura da letra, tamanho, altura da linha e a cor, mesmo que esteja sendo servido por Typekit ou Google API.
Não é incrível?! Claro, imagino que você já tinha usado o WhatFont pelo site deles, mas venha cá: não é mais prático pela extensão?
Se você encontrar uma fonte que você gosta, mas não tem certeza se funcionará no seu site, tente o Google Font Previewer para ver como ele coincide antes de fazer qualquer alteração.
Web Developer Checklist
Excelente extensão que possibilita você fazer uma análise rápida de qualquer site. Identificando itens de SEO, Mobile, Usabilidade, Acessibilidade, Integrações e Performance.
A grande vantagem do Web Developer Checklist é que ele também indica o erro e na maioria dos casos indica links úteis para você descobrir do que se trata tal erro e como poderá corrigir. É muito top.
Check My Links
Uma das piores partes (e que costuma sempre falhar) é a verificação de links quebrados no site que você acabou de desenvolver. Principalmente aqueles sites com jornada de compra e um enorme funil de vendas, ou loja com inúmeros produtos.
Com Check My Links seus problemas acabaram! Esta maravilhosa extensão testa todos os links do site e ainda aponta de forma visual (por cor) onde tem links funcionando corretamente e onde não tem. Só ver na imagem acima, ele inclusive indica ao lado com o código 404 (página não encontrada).
PHP Ninja Manual
O PHP Ninja Manual é uma excelente ferramenta para desenvolvedores. Esqueceu qual é aquele código? Ao invés de perder tempo pesquisando no Google, basta acionar a extensão e inserir aquilo que esta procurando.
RescueTime
O RescueTime possibilita você analisar a sua produtividade enquanto está utilizando o navegador do Chrome. Uma das melhores extensões do Chrome para produtivos.
A cada três minutos ele informa o tempo gasto nas janelas de sites. O que te possibilita identificar quanto tempo está gastando no site do cliente, quanto tempo esta gastando vendo vídeos de fails no Youtube ou respondendo posts dos seus amigos no Facebook.
Sua proposta é ajudar você a compreender melhor o seu tempo, apresentando friamente o resultado da sua navegação para que VOCÊ possa tomar alguma iniciativa para melhorar o a sua jornada de trabalho e evitar as inúmeras distrações do ambiente digital.
Clear Cache
Quem nunca passou pela situação do cliente não conseguir visualizar as alterações que você fez no site por conta do cache? E pior, ter levado bronca?
Mais do que isso, como web designer e/ou desenvolvedor, precisamos trabalhar com cache e saber quando é necessário limpar o nosso para que as atualizações feitas possam ser visualizadas e a velocidade do site testado individualmente.
Embora você possa fazer isso acessando Personalizar e Controlar o Google Chrome (três pontinhos) > Mais Ferramentas > Limpar dados de navegação… > blábláblá
Mas com o Clear Cache é possível apagar o seu cache e cookies globais ou locais com o clique de um botão. Prático né?
Gostou?
Se você conhece outras extensões que ajuda você na produtividade do dia a dia, não esqueça de compartilhar aqui com a gente! Deixa ai nos comentários, combinado?
