As 10 principais extensões e ferramentas do Chrome para Web Designers

Se você é designer e precisa de algumas ferramentas úteis para acelerar, colaborar ou auditar seus projetos de desenvolvimento web(web development) , a extensão do Chrome tem uma infinidade de ferramentas.

Esta lista inclui algumas das ferramentas mais populares – e alguns diriam necessárias – e extensões do Chrome que todo usuário que faz trabalho de design(design work) deve ter em sua mochila(kit bag) .

1. DomFlags

O DOM Flags é uma (DOM Flags)extensão do Chrome(Chrome extension) simples de usar que oferece uma nova maneira para os desenvolvedores trabalharem com as ferramentas do navegador. Ele permite que os desenvolvedores acelerem a tarefa de estilizar elementos.

Usando atalhos de teclado para cada elemento, você pode marcar sua navegação.

Todos nós já experimentamos a dificuldade de inspecionar elementos altamente detalhados e é fácil se perder.

Os sinalizadores DOM(DOM Flags) permitem rastrear elementos de estilo, incluindo um recurso para inspecionar componentes com precisão automaticamente. Isso, por sua vez, ajudará a acelerar o fluxo de trabalho e a implementação do DevTools(DevTools workflow and implementation) .

Os sinalizadores do DOM(DOM Flags) permitem que você acompanhe as alterações. E mantenha o foco nos elementos com os quais está trabalhando.

2. Engraçado

O Sizzy(Sizzy) oferece aos designers e desenvolvedores uma maneira simples de testar seus sites em várias janelas de visualização.

Sizzy fornece uma maneira simples de verificar seu projeto em tempo real. Ele oferece uma visualização interativa de qualquer número de dispositivos e tamanhos de tela. Você pode até simular um teclado de dispositivo(device keyboard) e alternar entre os modos paisagem e retrato(landscape and portrait modes) .

A instalação de uma extensão do Chrome(Chrome extension) adicionará um botão à sua barra de ferramentas que, quando clicado, abrirá o URL atual na plataforma Sizzy(Sizzy platform) . A extensão bloqueará todos os cabeçalhos “ x-frame-options ” para que você possa dar uma olhada em qualquer site online.

Sizzy é um projeto de código(source project) aberto , e você pode ver o código inteiro aqui(here) .

3. Checkbot

O Checkbot(Checkbot) pode testar seu site quanto a problemas de segurança e também auditar a velocidade de carregamento da página do seu site. Ele fornecerá aos designers um meio de identificar erros típicos e recomendar melhorias na segurança do site(site security) , mecanismo de pesquisa(search engine) e velocidade do site(site speed) .

Usando mais de 50 métricas de melhores práticas, ele irá auditar um site para melhores práticas de SEO , links quebrados, conteúdo duplicado(duplicate content) e muito mais. A ferramenta também validará CSS , JS e HTML .

O Checkbot detecta erros de designer e codificador(designer and coder errors) em tempo real, poupando-lhe o trabalho de voltar e verificar novamente seu trabalho repetidamente.

Se você está procurando uma ferramenta de boa qualidade(quality tool) que corrija links de páginas quebrados, garanta conteúdo e títulos de página(content and page titles) exclusivos e elimine cadeias de redirecionamento, essa ferramenta seria útil.

Para designers, ele pode ajudá-lo a minimizar seu CSS e JS(CSS and JS) , além de fornecer recomendações sobre como minimizar seu CSS e aproveitar o cache do navegador.

4. Aparador de GistBox

GistBox é uma das extensões do (GistBox)Chrome mais úteis para web designers.

O GistBox pode criar um GitHub Gist a partir de qualquer bloco de código(code block) na página da Web que você está visualizando.

No canto superior direito(right-hand corner) de qualquer bloco de código, você verá um pequeno botão que, quando pressionado, permitirá um pop-up que permite salvar o código no Gist .

Você pode criar novos Gists com um clique com o botão direito do mouse e salvar blocos de código para inspeção e uso(inspection and use) posteriores .

A integração com o GitHub permite que designers e desenvolvedores coletem blocos de código e os manipulem ou os categorizem para uso posterior. Isso o torna uma ferramenta de extensão do Chrome (Chrome extension)conveniente e eficiente .(convenient and efficient)

5. ColorZilla

ColorZilla É uma extensão do Chrome incrivelmente útil para coletar códigos hexadecimais que podem ser marcados, rotulados e categorizados para projetos de web design individuais .

Ele permite que você selecione uma ferramenta conta-gotas que irá extrair a cor de qualquer página da web e salvá-la na área de transferência do ColorZilla.

Com ele, você pode desenvolver rapidamente paletas de cores para uso posterior e como forma de garantir o uso consistente de cores no design e desenvolvimento(design and development) da web .

O ColorZilla(ColorZilla) também atua como um analisador de cores e editor de gradiente (gradient editor)CSS para que você possa converter uma imagem em CSS .

6. Qual Fonte

 Esta extensão do Chrome(Chrome Extension) é uma economia de tempo real para aqueles que desejam utilizar suas fontes favoritas e incorporá-las em seu próprio projeto de web design(web design project) .

A extensão WhatFont Chrome(WhatFont Chrome extension) permite que os desenvolvedores analisem e identifiquem rapidamente quase qualquer fonte em qualquer página da web.

A extensão é bem desenvolvida e ao invés de ter que abrir ferramentas de inspeção a extensão funciona apenas passando o mouse sobre a fonte.

Não apenas isso, mas a extensão também identificará o serviço que está sendo usado para fornecer uma fonte Pages go e oferecerá suporte à API de fontes do Google e ao Typekit.(Google Font API and Typekit.)

7. Tiro leve

LightShot é uma (LightShot)ferramenta de captura(screenshot tool) de tela rápida que permite capturar a totalidade ou parte de qualquer página e carregá-la ou baixá-la ou enviá-la para um destino de terceiros(party destination) .

As capturas de tela feitas pelo LightShot podem ser usadas e compartilhadas nas mídias sociais ou impressas.

Você pode anotar e adicionar texto, setas e muito mais à parte selecionada da tela. Mas talvez um dos recursos mais brilhantes dessa ferramenta simples para web designers seja que, ao selecionar uma imagem, você pode fazer uma pesquisa completa de imagens no Google(Google image) para imagens semelhantes online.

LightShot pode ser configurado em vários idiomas.

A extensão é escrita em JavaScript(JavaScript) puro e também funcionará para Windows , Chromebook , Linux e Mac OS(Linux and Mac OS) . Ele também pode ser acessado como um aplicativo de desktop,(desktop application) tornando-o uma excelente opção para web designers que dependem de vários dispositivos.

8. Captura de tela incrível

Assim como o Lightshot(Lightshot) , o Awesome Screenshot é uma extensão de captura de tela e imagem.

Ele difere do Lightshot , no entanto, de várias maneiras. O Awesome Screenshot(Awesome Screenshot) pode ser configurado para conectar todas as suas capturas de tela ao seu Google Drive .

Ele permite que você capture os elementos que estão além da sua visão para capturar a página inteira. Possui ferramentas adicionais de edição e anotação,(editing and annotation tools) a vírgula permite cortar e editar imagens, tudo dentro da extensão.

Você também pode estender seus recursos instalando o aplicativo Chrome(Chrome application) para desktop. A extensão também permite a captura e compartilhamento de vídeo para que você possa colaborar com outros desenvolvedores ou designers ao trabalhar em qualquer site.

Você pode adicionar imagens adicionais a uma captura de tela, bem como elementos azuis ou apagados(blue or erase elements) que você preferiria não mostrar aos outros.

9. Limpar Cache

O Clear Cache Chrome Extension é uma ferramenta rápida e simples que permite limpar os cookies e o cache da página que você está visualizando. Ele elimina a necessidade de navegar até a página de configurações do seu navegador para limpar alguns elementos simples da página.

Para web designers que estão fazendo várias edições e querem visualizá-las em tempo real, esta é uma excelente ferramenta que eliminará grande parte da frustração de olhar para dados antigos.

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

Limpar Cache permitirá que você configure quais elementos deseja limpar da página. As variáveis(Variables) ​​incluem Cash , downloads, todos os sistemas, dados de formulário, em Cash , banco de dados de índice, dados(index database) de plugins, senhas e muito mais.

10. Extensão do Google Chrome para Desenvolvedor Web

A extensão do Google Chrome para desenvolvedores da Web(Web Developer Google Chrome Extension) permite que desenvolvedores e designers auditem, analisem e verifiquem facilmente suas páginas da Web em busca de violações das práticas recomendadas de design(practice design) , codificação, usabilidade e otimização de mecanismos de pesquisa.

É uma ótima ferramenta tudo-em-um que não é pesada para navegar em nossos recursos, mas fornece uma tonelada de informações úteis para o design da web, além de ser responsável por elementos de otimização de mecanismos de pesquisa(search engine optimization) em um site ou página.

 A extensão instala a barra de ferramentas com várias ferramentas de desenvolvedor web.

A ferramenta fornecerá indicações sobre tamanho, largura e dimensões da página que entram em conflito com as práticas recomendadas de uso(practice use) em vários dispositivos. Ele permite que você verifique o JavaScript incorporado e visualize seu site através de uma simulação de vários dispositivos.

A extensão funciona bem no Windows , Linux e Mac OS. Além de problemas de codificação e design(coding and design issues) , ele também fornecerá informações sobre informações de metatag ,(tag information) cabeçalhos de resposta, informações de cores(color information) e informações topográficas.

Você pode revisar os principais recursos da ferramenta, bem como seus recursos completos, no site do desenvolvedor Chris Pedericks(Chris Pedericks’ website) .

Sem dúvida, há uma infinidade de outras extensões de alta qualidade e úteis do Chrome que podem ser usadas por web designer ou desenvolvedor(designer or developer) .

Esta lista mostra algumas das ferramentas mais populares e úteis. Você tem alguma recomendação de ferramentas que você acha que eu sou mais útil ou superior às desta lista? Nos informe.



Elizabeth Ávila

About the author

Sou técnico em informática e tenho mais de 10 anos de experiência na área. Eu me especializei no desenvolvimento do Windows 7 e Windows Apps, bem como no design de Cool Websites. Sou extremamente conhecedor e experiente na área, e seria um ativo valioso para qualquer organização que queira expandir seus negócios.


Related posts