Construí-lo: 11 extensões do chrome brilhantes para desenvolvedores web

Chrome capturado recentemente uma participação de 25% do mercado de navegadores de Internet, tornando-o o segundo mais utilizado navegador do mundo, atrás do Internet Explorer (que está a evoluir para Projeto Spartan

). Em última análise, isso significa que o Chrome é o de fato casa para desenvolvedores web.Projeto Spartan: um navegador Lean and Unfinished para o Modern WebProjeto Spartan: um navegador Lean and Unfinished para o Modern WebSpartan pega a luta com os concorrentes do navegador como o Chrome e Firefox. Será que vai viver até os ideais de soldados espartanos? Nós colocamos esta primeira versão para o teste e não foram impressionado.consulte Mais informação

Embora eu sou parcial para o Firefox, eu posso entender porque as pessoas gostam Chrome. Ele tende a benchmarks navegador dominam e torna mais fácil para as pessoas normais para tornam-se usuários de energia do Chrome. Outros realmente odeio Chrome, mas são preso usá-lo devido à disponibilidade de certas extensões.

Essa é uma razão pela qual Chrome é tão bom para os desenvolvedores web: o Loja online do Chrome e sua piscina de extensões. Se você já está pensando em projetar ou codificação de um site, aqui estão algumas ferramentas essenciais que você deve instalar imediatamente.

ColorZilla

cromo-webdev-ColorZilla

ColorZilla começou como um addon Firefox, mas tornou-se tão popular que muitos solicitou uma versão do Chrome. Agora, aqui estamos nós. Esta extensão acessível é, basicamente, uma versão avançada da ferramenta conta-gotas que você encontraria em um programa como o Paint ou Photoshop.

Com ele, você pode apontar para qualquer ponto no seu browser e imediatamente retirar a informação de cor naquele local. Uma vez puxado, você pode ajustá-lo (seja por RGB, HSV, ou hex reta) antes de copiá-lo para o clipboard. Extremamente fácil de usar.

Ele também vem com um Gradiente Generator CSS, uma página web Cor Analyzer, e algumas paletas de cores pré-instalados para sua conveniência.

janela Resizer

cromo-webdev-window-resizer

Um dos perigos do desenvolvedor web é ter certeza de que a experiência de visualização de um site é agradável para os usuários em todos os tipos de dispositivos. Nós não estamos falando apenas de área de trabalho vs. móvel - que é importante - mas também a diferença entre pequenos comprimidos e monitores enormes.

janela Resizer é uma maneira fácil de redimensionar a janela do navegador na mosca. No clique de um botão, você será capaz de testar seu site em várias resoluções para ver o que os usuários estão vendo - e então você pode ajustar em conformidade.

Tab IE

cromo-webdev-IETab

Outro grande perigo do desenvolvedor web é padrões de navegador (ou a falta dele). Internet Explorer, Firefox, Chrome, Opera, e todos os outros navegadores menores irá processar sites de formas ligeiramente diferentes. Enquanto isso, alguns navegadores são mais lentos para adoptar normas que outros.

Ou, no caso do Internet Explorer, as normas são jogados para fora da janela e desenvolvedores web são levados a arrancar seus cabelos como eles são forçados a fazer acomodações.

Com Tab IE, este processo é feito um pouco mais fácil. Ele permite que você ver um site em uma nova aba do Chrome, mas prestados como apareceria no IE. Não uma solução revolucionária para o problema do IE, mas pelo menos é alguma coisa.

Validade

cromo-webdev-validade

Não todo o código HTML é igual. Enquanto navegadores desempenhar um grande papel em conformidade com padrões, parte da responsabilidade também recai sobre o desenvolvedor web a seguir boas práticas de HTML. É por isso que existem ferramentas para fora lá para testar e validar HTML.

Validade é uma extensão que permite que você faça tudo isso sem ter que visitar sites de terceiros. Basta abrir o seu site, clique no botão, e ele irá exibir todas as mensagens HTML inválidos no console do navegador. Validação é feita através do Serviço de Validação W3C.

BuiltWith

cromo-webdev-builtwith

Uma coisa que eu odeio sobre desenvolvimento web é que existem muitos bibliotecas, estruturas e mecanismos disponíveis para uso. A liberdade de escolha é grande, mas é uma dor quando o número de tecnologias torna-se tão grande que você não pode manter-se com todos eles.

Alguma vez você já visitou um site e se perguntou o que a tecnologia subjacente é?



o BuiltWith extensão é um único botão que analisa a página atual para ver todos das bibliotecas web, estruturas e mecanismos que o poder dele, incluindo redes de propaganda, plataformas de distribuição de conteúdo, e até mesmo o hospedagem software por trás de tudo.

Cliente Postman RESTO

Para aqueles de vocês trabalhando com APIs de REST, Carteiro é a única ferramenta que você precisa para um fluxo de trabalho simplificado. Com ele, você pode construir solicitações HTTP e obter respostas formatados em JSON e XML. As respostas são abertas em uma janela separada como HTML.

Você também pode agrupar vários pedidos em algo chamado uma coleção, que é uma ótima maneira de manter-se organizado e eficiente. Você também pode testar em vários ambientes, alternando-se as variáveis ​​ambientais dentro da própria extensão.

Ipsum corporativa

-Cromo-webdev corporativo-ipsum

Uma maneira de gerar texto de enchimento é copiar e colar “asdf” uma e outra vez uma centena de vezes. A melhor maneira seria para instalar Ipsum corporativa e deixá-lo gerar texto de enchimento para você num piscar de olhos.

Nós cobrimos várias geradores de Lorem Ipsum antes, mas o apelo da Corporate Ipsum é que ele fica bem no seu browser. Você pode retirá-lo com um único clique de botão. Não há nenhuma razão para não usá-lo, se você me perguntar. Agora você pode voltar para realmente codificação de seu site!10 Alternativas útil se você está cansado dos habituais Lorem Ipsum Filler Textos10 Alternativas útil se você está cansado dos habituais Lorem Ipsum Filler TextosWeb designers provavelmente tem um gatinho de ferramentas Lorem Ipsum salvos por perto que é útil para o seu trabalho de desenvolvimento web. geradores de Lorem Ipsum vêm em vários forms- alguns deles permitem personalizar o texto fictício ...consulte Mais informação

TabCloud

desenvolvimento web, por vezes, ocorre ao longo de várias máquinas. Enquanto controle de origem para desenvolvedores é a principal forma de se manter sincronizado e up-to-date, e se você quiser transferir múltiplas abas entre computadores? Isso e onde TabCloud entra.O que é o Git & Porque você deve usar Controle de Versão Se você é um desenvolvedorO que é o Git & Porque você deve usar Controle de Versão Se você é um desenvolvedorComo desenvolvedores web, uma grande quantidade de tempo que tendem a trabalhar em sites de desenvolvimento local, em seguida, basta carregar tudo quando estamos a fazer. Isso é bom quando é só você e as mudanças são pequenas, ...consulte Mais informação

TabCloud sincroniza os seus guias para a nuvem, permitindo-lhe reabri-los em outro lugar. Ele também pode ser usado localmente como um protetor de sessão, permitindo que você armazene um conjunto de guias para mais tarde revisitar. Tabs são salvas em sua conta do Google.

WhatFont

cromo-webdev-whatfont

font design é um grande componente do desenvolvimento web, razão pela qual serviços como Google Web Fonts tornaram-se tão popular. A boa notícia é que essas fontes livres são agora alguns dos a maioria das fontes web belas disponível atualmente.Como usar o Google Fonts em seu próximo projeto Web & Por que você deveComo usar o Google Fonts em seu próximo projeto Web & Por que você deveescolha da fonte é uma decisão de projeto integrante em qualquer site, mas na maioria das vezes estamos contentes com o mesmo serif de idade e sans-serif família. Enquanto o corpo principal do texto deve sempre ser algo ...consulte Mais informação

Mas admitir: há momentos em que você está navegando na web e você se deparar com uma fonte impressionante que você nunca viu antes. Há muitas maneiras de identificá-lo, mas a maneira mais rápida é usar WhatFont. Com ele, você pode inspecionar fontes simplesmente pairando sobre eles. Como poderia ser mais fácil?

impressionante tela

cromo-webdev-awesome-screenshot

Se as imagens não fazem parte da sua rotina normal de desenvolvimento web, impressionante tela vai ajudar a mudar isso. As capturas de tela são grandes para documentar mudanças no design e compartilhar trabalhos em andamento com os seus clientes ou membros da equipe.

Esta extensão tem várias funções de captura, incluindo página inteira, área selecionada, ou área visível. Ele também permite que você adicione anotações, borrão partes sensíveis da imagem, e compartilhar com um único clique. Ou fazer o upload para o Google Drive em seu lugar.

Se o conceito intriga você, mas você preferir usar um programa de desktop mais poderoso, confira este Comparação de ferramentas de captura de tela e começar a usar o que funciona melhor para você.4 Melhores ferramentas para criar Imagens Comparado4 Melhores ferramentas para criar Imagens ComparadoCTRL + SHIFT + 4. Três chaves - isso é tudo que você precisa para screenshots perfeitos. Ele não precisa ser um aborrecimento! Experimente estas ferramentas avançadas de captura de tela e você nunca vai olhar para trás.consulte Mais informação

Verifique Meus Links

cromo-Webdev-checkmylinks

A abundância de erros de desenvolvimento web irá frustrar seus visitantes, e links quebrados são um dos piores criminosos. Um link quebrado pode ser bom, mas mais do que isso e seu site começa a perder credibilidade e reputação. Felizmente, este é um erro facilmente evitados.

Verifique Meus Links faz exatamente o que promete: ele verifica seus links. links válidos são marcadas em verde enquanto links quebrados são marcados a vermelho e no final ele vai dar-lhe uma pontuação percentual. Tudo que você tem que fazer depois é ir e reparar esses links!

Quais extensões você usa?

Mais um extensão para a produtividade Eu recomendo é StayFocusd. É mais de uma extensão de uso geral em vez de uma extensão de desenvolvimento web, mas é certamente útil independentemente. Ele mantém-lo de ser distraído pela web enquanto você trabalha!

O que você acha deles? Existem outras extensões de desenvolvimento web essenciais que você recomendaria? Compartilhe conosco nos comentários abaixo!


Artigos relacionados