Google Chrome é um maravilhoso navegador da web preferido para designers da web e desenvolvedores da web, porque oferece tantas extensões úteis para o design do site. Com as extensões do Google Chrome, você pode adicionar mais recursos ao navegador para ajudá -lo a projetar, depurar e trabalhar em sites. Compartilhamos com você as dez principais extensões do Chrome para designers e desenvolvedores.
1. Firebug Lite (para o Google Chrome)
Firebug Lite (para o Google Chrome) é uma extensão que configura o Firebug Lite no navegador. Embora o embutido Ferramentas de desenvolvedor No Chrome, oferece relativamente as mesmas características do Firebug (e mais), os fãs de longa data do Firebug apreciarão essa extensão para depurar e testar seu trabalho no Chrome.
2. Desenvolvedor da Web
Chris Pederick’s Desenvolvedor da Web A barra de ferramentas é a favorita de longa data entre designers da web e desenvolvedores de front-end. Originalmente criado para o Firefox, ele foi transportado para o Chrome com uma interface mais esbelta. Possui muitas opções para examinar e entender os layouts da página da web, incluindo a exibição de pedidos de empilhamento de elementos de bloco, exibindo informações de estilo CSS sobre certos elementos, controle do cache do navegador e muito mais.
Para aprender algumas dicas e truques na barra de ferramentas do desenvolvedor da web, consulte as seguintes postagens:
3. Teste de resolução
Teste de resolução é uma extensão para testar páginas da Web em diferentes resoluções de tela, com a opção de definir suas próprias resoluções personalizadas. Isso é muito útil para garantir que seu design na web fique ótimo em diferentes tamanhos de monitor.
4. Pendulum
Pêndulo estende as ferramentas de desenvolvedor internas no Google Chrome. A extensão fornece a seus usuários muitos recursos, como validação de marcação de um toque, usando os serviços da Web automatizados do W3C, ocultando imagens em uma página da web, visualizando scripts incluídos em uma página da web e muito mais.
5. Planeta
Uma das melhores maneiras de avaliar a acessibilidade de uma página da Web é remover seus estilos CSS e ver se o conteúdo apresentado ainda é legível sem eles. Isso simula a experiência de um usuário que não pode ver a tela do monitor e precisa confiar na marcação da página da web para acessar o conteúdo. Planeta faz uma coisa bem; Ele remove todos os estilos CSS em uma página da web.
Embora criado principalmente para testes de desenvolvimento da web, você pode usar esta extensão para visualizar seus estilos favoritos sem si (para que o chefe não o pegue navegando Digg Quando você realmente deve terminar essa função JavaScript).
6. Imagem Cropper
Se você quiser pegar certas partes de uma página da web, Imagem Cropper é a extensão do Chrome simples e sem frescuras para você. Basta arrastar a área que você deseja cortar, e será necessário exatamente essa parte da página da web. Precisa de precisão perfeita para pixels?
Ele exibe a dimensão e a localização de suas culturas para ajudá -lo a obter o tamanho necessário.
7. Lorem muito gerador
Essa extensão se orgulha de ser minimalista e simples – e isso é bom, porque não há razão para gerar o texto de Lorem ipsum deve ser um caso complicado. Lorem muito gerador Ajuda você a preencher seus maquetes de design com texto fictício para fins de apresentação.
8. Ou seja, guia (para Windows)
Solução de problemas no mecanismo de layout tridente proprietário do Internet Explorer não é uma provação divertida. Com Ou seja, guiavocê pode pelo menos economizar algum tempo de ter que usar o Internet Explorer (e sua lista limitada de extensões) para depurar problemas de renderização em seu trabalho.
9. JQuery Shell
JQuery Shell Permite executar comandos JavaScript e JQuery no contexto da página da web atual. É uma ótima extensão para aprender e experimentar o jQuery.
10. Seletor de cores
Esta extensão Chrome de um truque faz uma coisa muito bem: obtendo rapidamente os valores hexadecimais e RGB de qualquer cor em qualquer página da web. Pode ser muito útil para determinar quais cores o seu site favorito usa sem precisar pegar uma captura de tela no Photoshop e usar a ferramenta Eyedropper.
11. WebEdit
Com o Webedit Extensão do Chrome, você pode fazer com que qualquer página da web seja editável (as alterações que você faz, é claro, não serão salvas). Por que essa extensão seria útil? Se você estiver criando um site e deseja brincar com elementos sem fazer alterações significativas no código, essa extensão pode ser muito útil.
12. Sniffer cromado
Você já se perguntou quais tecnologias, estruturas e aplicativos de código aberto um site está usando? Desenvolvedores da Web experientes podem descobrir isso estudando o código -fonte do site, mas se você quiser uma maneira mais conveniente e rápida de fazer isso, confira Sniffer cromado. O Chrome Sniffer lista toda a estrutura/bibliotecas JavaScript conhecidas (jQuery, MooTools, etc.) e CMS (Drupal, WordPress, etc.) que um site usa.
13. Captura de tela da página da web
Uma tarefa comum para web designers está recebendo capturas de tela de páginas da web. Com Papagem da web screenshotvocê pode capturar uma página da web inteira, mesmo que ela derrame fora da viewport do navegador. Ele oferece aos usuários a oportunidade de redimensionar a janela antes de capturar e salva a tela como um arquivo PNG.
14. Conta -gotas
Conta -gotas é uma extensão do Google Chrome que oferece a capacidade de determinar uma cor em qualquer página da web. Além disso, ele apresenta uma roda de cores e amostras de cores (encontradas na maioria dos softwares gráficos) para que você possa experimentar, ajustar e escolher cores.
15. Ferramentas do site SEO
Uma página da Web bem formada com ótima marcação leva a impressionantes resultados de mecanismos de pesquisa. No entanto, se você deseja avaliar seu site em termos de fábricas conhecidas de otimização de mecanismos de pesquisa, experimente o Ferramentas do site SEOuma extensão do Chrome que oferece uma infinidade de ferramentas e recursos úteis para avaliar o SEO. Ele pode puxar toneladas de métricas na página e fora da página, informações de mídia social e muito mais.
Conselhos reais
A utilização dessas extensões pode salvar desenvolvedores e designers da Web muito tempo e torná -los muito mais eficientes em seu trabalho.
Se você está procurando uma empresa que seja eficiente e profissional para um projeto de web design, não procure mais, MidiaPro em Harrisburg, PA. Aqui está um exemplo de sua experiência no design de sites para hotéis. Esta é uma das inúmeras indústrias em que se especializam.
Conteúdo relacionado
Perguntas Frequentes sobre Extensões do Google Chrome para Designers e Desenvolvedores
1. O que é o Firebug Lite e por que é útil para designers da web?
O Firebug Lite é uma extensão que configura o Firebug no navegador Google Chrome, oferecendo recursos de depuração e teste semelhantes aos do Firebug. É útil para designers que desejam testar seu trabalho no Chrome.
2. Como a extensão Desenvolvedor da Web pode auxiliar os designers e desenvolvedores de front-end?
A extensão Desenvolvedor da Web oferece várias opções para examinar e entender os layouts de páginas da web, incluindo exibição de estilos CSS, controle de cache do navegador e muito mais.
3. Por que é importante testar páginas da web em diferentes resoluções de tela?
O Teste de Resolução é uma extensão útil para garantir que o design de uma página da web seja responsivo e fique ótimo em diferentes tamanhos de monitor, ajudando os designers a criar uma experiência consistente para os usuários.
4. O que o Pêndulo oferece aos usuários em termos de validação de marcação e visualização de scripts?
O Pêndulo estende as ferramentas de desenvolvedor do Chrome, fornecendo recursos como validação de marcação, ocultação de imagens e visualização de scripts incluídos em uma página da web, auxiliando os desenvolvedores em seus trabalhos.
5. Como a extensão Seletor de Cores pode facilitar a escolha de cores para um design de site?
O Seletor de Cores permite aos usuários obter rapidamente os valores hexadecimais e RGB de qualquer cor em uma página da web, facilitando a escolha e ajuste de cores para o design do site.
