Cerca de 30 extensões estão instaladas no meu navegador que simplificam a vida e o trabalho na Internet. Neste artigo, quero compartilhar 10 extensões de layout relevantes do Google Chrome que uso constantemente ao desenvolver sites.
1. PerfectPixel
Um exemplo de uso do PerfetPixel ao desenvolver novos blocos em www.wrike.com
O layout do site pixel a pixel causa dificuldades para iniciantes e profissionais experientes. O PerfectPixel sobrepõe a imagem do layout na parte superior do layout no navegador. Nas configurações de expansão, você pode ajustar a transparência e o layout do layout, o que permite levar em consideração todos os tamanhos e recuos necessários. O uso deste plugin simplificará o layout e reduzirá o número de edições ao enviar um projeto. No meu conjunto de extensões, o PerfectPixel ocupa o primeiro lugar devido à sua funcionalidade e usabilidade.
Link para instalar a extensão
2. Wappalyzer
Estudo de caso Wappalyzer em Collaborate.wrike.com/2019/london
É sempre interessante que ferramentas e tecnologias são usadas nos sites. O Wappalyzer fornece informações sobre CMS, estruturas JS, bibliotecas CSS, ferramentas de análise e muito mais. Imagine que a animação no site é uma biblioteca CSS gratuita que você pode usar em seu projeto. Isso reduzirá o tempo de pesquisa da ferramenta necessária e estará ciente das tecnologias que o site usa.
Link para instalar a extensão
3. Contorno HTML5
Hierarquia de cabeçalho em habr.com/en/company/wrike
O HTML 5 Outliner exibe uma lista de cabeçalhos em uma página do site. A extensão ajuda a estruturar os títulos e a identificar violações na hierarquia. Por exemplo, na tag de seção HTML 5 Outliner exibe um aviso sobre a ausência da tag h2 . Essa é uma das maneiras rápidas e convenientes de determinar o uso correto dos cabeçalhos no layout.
Link para instalar a extensão
4. Wireframify
Estudo de caso da Wireframify em www.wrike.com
Os designers projetam sites usando uma estrutura de arame - um conjunto de linhas, blocos e assinaturas. Essa abordagem permite criar uma arquitetura de projeto com base no recuo, tamanho e localização dos blocos na página. O Wireframify inclui uma forma alternativa do site na forma de um wireframe, que ajudará a evitar o uso incorreto:
- margem negativa;
- alinhamento de elementos usando preenchimento;
- recuo usando propriedades CSS esquerda, direita;
Link para instalar a extensão
5. PageLiner
Estudo de caso do PageLiner em www.wrike.com/apps
No editor de gráficos, você pode alinhar os elementos ou exibir a grade do site usando linhas de guia. O tipógrafo pode ativar essa funcionalidade no navegador usando o PageLiner . A extensão exibe guias semelhantes, como no mesmo Adobe Photoshop. Com o PageLiner, alinhar elementos é muito mais fácil.
Link para instalar a extensão
6. Desenvolvedor Web
Lista de recursos do desenvolvedor da Web
O Desenvolvedor da Web adiciona uma barra de ferramentas adicional ao navegador. Dentro dele, existem 10 guias: Desativar, Cookies, CSS, Formulários, Imagens, Informações, Diversos, Estrutura de tópicos, Redimensionar e Ferramentas. A funcionalidade de extensão permite:
- desabilite CSS, JS e imagens;
- verifique a validade do HTML, CSS;
- manipular estilos CSS;
- Testar formulários HTML
- exibir as meta tags de informações necessárias;
- Redimensionar a janela do navegador
- limpe o cache;
O desenvolvedor da Web continua sendo uma extensão popular entre os desenvolvedores. Pode ser comparado com a ferramenta múltipla na vida real: você sempre tem o conjunto de ferramentas necessário à mão.
Link para instalar a extensão
7. CSS do usuário
Exemplo de CSS do usuário em www.wrike.com/customers
Imagine que você queria corrigir o CSS diretamente no navegador, mas depois disso teve que recarregar a página. Todas as suas conquistas desapareceram e você deve fazer alterações novamente. Use CSS do usuário , que salvará seus estilos. Não precisa mais se preocupar com o desaparecimento do CSS. A funcionalidade da extensão permitirá que você teste o CSS gravado ao passar para outras páginas.
Link para instalar a extensão
8. StyleURL
Estudo de caso do StyleURL no Wrike www.wrike.com/customers
O CSS do usuário não substituirá o painel do desenvolvedor do navegador. Se você está acostumado a trabalhar em devtools e, ao mesmo tempo, não deseja perder as alterações após atualizar o navegador, instale o StyleURL . A extensão lembrará suas alterações e fornecerá a capacidade de salvar o trabalho em um arquivo separado ou fazer o upload para o github gistub.
Link para instalar a extensão
9. Siteimprove Accessibility Checker
Estudo de caso do Siteimprove Accessibility Checker em www.wrike.com/newsroom
O Siteimprove Accessibility Checker é uma ferramenta que verifica o HTML quanto à conformidade com os padrões de acessibilidade para fornecer acesso ao conteúdo para todos. A extensão exibe erros com informações detalhadas. Na descrição deles, você pode encontrar notas de rodapé no WCAG 2 e links diretos para artigos detalhados sobre acessibilidade.
Link para instalar a extensão
10. Tabsbook
Exemplo de guia
Cada um trabalha com marcadores à sua maneira. Existem aqueles que salvam links para acesso rápido aos sites e aqueles que usam marcadores para armazenar informações úteis. Com o Tabsbook, você pode transformar seus favoritos em uma base de conhecimento. A interface de extensão exibe uma estrutura de pastas em forma de árvore para facilitar a navegação dos seus favoritos. Todos os dados são armazenados na nuvem, o que permite acessá-los a partir de qualquer dispositivo.
Link para instalar a extensão
As extensões serão úteis para todos os iniciantes e profissionais experientes que não os conheciam. Escreva nos comentários quais extensões você usa.
Extensões de navegador mais úteis podem ser encontradas nos 10 principais links de plug-ins do Chrome para designers e extensões úteis do Google Chrome para o programador.