As mais úteis extensões Chrome para Designers & Developers

Google Chrome é o navegador mais rápido e popular entre os usuários da Internet, carrega páginas da web em um piscar de olhos, e aplicações web complexas de forma rápida. E a janela do navegador Chrome é simplificado, limpo e simples.

E para você que é desenvolvedor ou designer, reunimos alguns das melhores extensões do Chrome que vai fazer simplificar as suas tarefas de desenvolvimento de forma simples e sem muito incômodo. Assim, sem muito mais delongas vamos verificar essas extensões do Chrome.

1. Gradient Inspector

gradient-inspector

Extensão Chrome adiciona uma barra lateral para o Xcode que exibe informações sobre os gradientes aplicados ao elemento inspecionado. Você também pode alternar entre cada gradiente individualmente.

2. Emmet Live Style

emmet-live

Emmet livestyle é um plugin para o bi-direcional (editor ↔ browser) edição ao vivo de CSS. Atualmente, ele trabalha no Google Chrome, Safari e Sublime, mais navegadores e editores estarão disponíveis mais tarde. Você pode associar duas fontes CSS completamente diferentes para a edição online. Por exemplo você pode tomar minified e fonte CSS concatenada no browser, associá-la a um dos módulos CSS fonte abertos no editor e usá-los para edição online totalmente bi-direcional.

3. Dimensions Toolkit

dimension-toolkit

A Dimensions Toolkit oferece ferramentas úteis para testar seus projetos de websites responsivos, com padrões prontos e personalizados, dimensões redimensionáveis, e muito mais. Ele está disponível tanto como uma extensão do Chrome e como um app web.

4. Batman.js

batmanjs

Para quem utilizar o Framework Batman.js é uma ferramenta inestimável. Ele inclui uma variedade de ferramentas úteis para o desenvolvimento com Batman.js direito no seu browser.

5. Clockwork

clockwork

Se você é um desenvolvedor PHP e usa o Chrome, então confira a extensão Clockwork Chrome. Ele fornece um novo painel com todos os tipos de depuração úteis e informações de perfil, incluindo informações sobre o GET e POST dados, cookies, pedido, cabeçalhos, os dados da sessão, e muito mais.

6. Muzli

muzli

Contém inúmeros exemplos para você se inspirar.

7. Palletab

palettab1

O Pallettab usa fontes do Google e cores incríveis para inspirá-lo. É uma ótima ferramenta para encontrar as fontes adequadas para seus sites ou aplicações web.

8. Dimensions

dimensions1

Dimensions é uma extensão para medir dimensões da tela. Atualmente só está disponível para Chrome. Você pode medir entre os seguintes elementos: imagens, entradas e campos, botões, vídeos, gifs, texto, ícones. Para a melhor experiência você pode definir um atalho de teclado no final da lista de extensões para ativar e desativar rapidamente a extensão.

9. Dom Flags

domflags

Dom Flags é uma nova maneira de interagir com os DevTools. Pela primeira vez na história, agora você pode criar atalhos de teclado para elementos DOM.

DomFlags são como marcadores para navegar. Eles ajudam a controlar e navegar até elementos importantes. A extensão tem características de auto-inspecionar que ajuda você com elementos de precisão milimétrica.

10. Markdown

markdown1

Escrever e-mail com o código é bastante tedioso. Markdown é uma extensão do Google Chrome, Firefox, Thunderbird e que lhe permite escrever e-mail em Markdown e convertê-lo antes de enviar.

11. Chrome Logger

chromelogger

Chrome Logger é uma extensão do Chrome para depurar seus aplicativos do lado do servidor no console do Chrome. A instalação é rápida e fácil, com bibliotecas de linguagens para Python, PHP, Ruby, Node.js, .NET e ColdFusion.

12. Event Spy

eventspy

 

Event Spy é uma extensão que permite analisar grandes aplicações web. De forma fácil os desenvolvedores podem encontrar eventos e manipuladores de eventos correspondentes para um aplicativo da web ou site. Ele se conecta ao código dos aplicativos e registra todos os eventos com manipuladores de eventos, e exibe informações no painel inferior com o resto de ferramentas de desenvolvimento do Chrome.

13. Dewey

dewey

 

Dewey é um aplicativo para marcar, pesquisa e classificação os seus favoritos do Chrome. Com Dewey você pode adicionar tags personalizados, gerar screenshots de seus marcadores, busca de uma forma muito mais inteligente e mais rápido. Dewey organiza os seus favoritos em uma grade que continua carregando conforme você vai rolando a página para baixo. O layout também é totalmente responsivo, desta forma funciona bem se você precisar usar em uma janela do navegador mais estreita.

14. Resizer

resizer

 

Resizer é um bookmarklet responsive design que permite alterar rapidamente as dimensões de uma página na internet para testar projeto responsivo. Em primeiro lugar, basta arrastar o botão no site em sua barra de favoritos. Então você simplesmente visita qualquer site que você deseja testar dimensões sensíveis e clique no bookmarklet Resizer.

15. Snoopy

snoopy

 

Snoopy é um bookmarklet para bisbilhotar páginas da web. É destinado para uso em navegadores móveis (como o Mobile Safari no iPad), onde você não pode ver o código fonte como eles são construídos. Você pode achar que é útil para o seu navegador de desktop. Usando o bookmarklet lhe dará uma sobreposição com informações que Snoopy pode ‘farejar’ fora da página, como o tipo de documento, as bibliotecas JS que são usadas na página, se tem analytics, o que incorporação de fontes técnica é utilizada, etc. Ele também dá lhe a capacidade de ver o código fonte cru e / ou gerados da página.

 

16. Speed Tracer

speed-tracer

 

Speed Tracer é uma ferramenta para ajudá-lo a identificar e corrigir problemas de desempenho em suas aplicações web. Ele visualiza as métricas que são tomadas a partir de pontos de instrumentação baixo nível dentro do navegador e analisa como seu aplicativo é executado.

17. Ruul.Screen Ruler

ruul

 

Uma fantástica e simples régua de tela para medir os itens da sua página web.

18. CSS Shape Editor

css-shape-editor

 

Esta extensão cria uma nova opção no seu painel de inspeção, e com ela você pode gerar css’s como polygon(), circle() and ellipse() para o item selecionado.

19. Image Properties

image-property

 

Exibe de forma fácil e rápida as informações e características de uma imagem do site que você está inspecionando.

20. Zoom

zoom

Zoom ajuda você a aumentar e diminuir de forma fácil e rápida as informações do seu navegador com a ajuda do seu mouse.

Fonte: CodeGeek