0 Compartilhamentos 303 Views

10 extensões Firefox para desenvolvedores e designers

22 de setembro de 2015

Desenvolvedores web podem sempre contar com inúmeras ferramentas úteis em seu dia a dia. Ferramentas integradas aos navegadores, além disso, também estão disponíveis, facilitando inúmeras tarefas e proporcionando grande economia de tempo.

O navegador Google Chrome conta com ferramentas específicas para desenvolvedores, vale lembrar. Suas devtools são extremamente úteis.

Confira abaixo alguns de nossos artigos a respeito das mesmas:

Mas, e o navegador da Mozilla? Ele também conta com ferramentas para desenvolvedores, é claro, acessíveis através da tecla de atalho F12.

plugins

Além disso, extensões, add-ons ou plugins também representam uma excelente maneira de estendermos as funcionalidades de um browser. Existem extensões voltadas a diversas áreas, para a realização de inúmeras tarefas. A loja de complementos do Mozilla Firefox (assim como a do Google Chrome) está repleta delas.

O número de extensões disponíveis é enorme, e obviamente existem também aquelas voltadas para desenvolvedores, programadores e designers. Vale ressaltar, entretanto, a importância de baixar tais ferramentas de locais seguros.

Dê preferência à loja oficial do navegador, busque por referências, confira os reviews de cada add-on, sua classificação, todos os comentários feitos por usuários, etc. Verifique também a data da última atualização realizada, e fuja de extensões não atualizadas durante muito tempo.

Para facilitar sua vida, preparamos uma lista com algumas extensões bacanas e extremamente úteis para o dia a dia de desenvolvedores e designers. Vamos lá:

1) Greasemonkey

Extensão Firefox - Greasemonkey

Esta é uma extensão bastante conhecida. A Greasemonkey permite que o desenvolvedor instale e rode pequenos códigos JavaScript que alteram o funcionamento de um site.

Os scripts são executados sempre que a página é carregada, sendo assim, a extensão pode ser utilizada de maneira tal a alterar o modo como o site funciona permanentemente, para o usuário.

Claro, ela também pode ser usada para a averiguação de bugs, problemas na renderização, e muito mais. O site da Greasemonkey também conta com inúmeros scripts desenvolvidos pelos próprios usuários, os quais podem ser baixados e carregados na extensão.

2) Nimbus Screen Capture

Extensão Firefox - Nimbus Screen Capture

Não precisamos nem dizer o quão importante são as ferramentas para captura de screenshots, não é? Sim, utilizamos tais ferramentas aqui mesmo no nosso dia a dia no Código Fonte, para a ilustração de nossos artigos.

Existem tanto softwares standalone quanto plugins para navegadores que realizam esta tarefa. Uma ótima extensão para a captura de “fotos de tela” é a Nimbus Screen Capture, que permite a captura de uma página inteira ou então de “pedaços” dela, com o usuário selecionando as áreas desejadas através do mouse.

A extensão também conta com um pequeno editor, para retoques simples nas imagens capturadas e inserção de balões, texto e formas geométricas. Ela também permite que as screenshots sejam compartilhadas, através do Google Drive.

3) ColorZilla

Extensão Firefox - ColorZilla

A ColorZilla é uma pequena e útil extensão. Ela permite que o desenvolvedor identifique rapidamente as cores em qualquer página, fornecendo os respectivos códigos RGB, Hexadecimal, HSV e CMYK.

Sua utilização é bastante simples: tão logo ativada, basta posicionar o cursor sobre qualquer elemento da página. A cor é identificada e exibida/atualizada em tempo real, incluindo todos os respectivos valores.

Também é possível copiar rapidamente todos os códigos de cores para a área de transferência do Windows (para posterior utilização em algum software gráfico, por exemplo). Paletas de cores também podem ser criadas, salvas, compartilhadas e baixadas, vale lembrar.

E como se não bastasse, a ColorZilla também conta com uma ferramenta para análise de cor do DOM das páginas.

4) MeasureIt

Extensão Firefox - MeasureIT

Ótima e simples extensão para identificação de dimensões de elementos e trechos de uma página. Ative-a e simplesmente “desenhe” uma régua com o mouse: as dimensões (em pixels) são exibidas automaticamente e atualizadas conforme você altera o desenho (“largura = width” e “height = altura”).

5) Dummy Lipsum

Extensão Firefox - Dummy Lipsum

Como seu nome deixa bem claro, a “Dummy Lipsum” é na verdade um gerador de “Lorem Ipsum“: se você é desenvolvedor certamente sabe do que se trata.

É possível definir previamente o número de parágrafos que serão gerados e também se sinais de pontuação devem ser adicionados ou não. Simples assim.

O texto gerado pode então ser rapidamente copiado para a área de transferência do sistema operacional.

6) Firebug

Extensão Firefox - Firebug

O Firebug permite que o código de qualquer website seja editado, “debugado” e monitorado. É possível monitorar HTML, CSS e JavaScript em tempo real.

Desenvolvedores podem inspecionar o HTML e o estilo das páginas em tempo real, bem como analisar o uso da rede e monitorar o tempo de carregamento dos sites.

7) SQLite Manager

Extensão Firefox - SQLite Manager

Eis aqui uma ótima extensão para manipulação de bancos de dados SQLite. A “SQLite Manager” abre e também permite que novas tabelas e bancos sejam criados.

A extensão também permite a reindexação de tabelas, além de possibilitar que o desenvolvedor crie suas próprias queries. Isto além de permitir a importação e a exportação de dados. Dentre outros inúmeros recursos, é claro.

8) Html Validator

Extensão Firefox - HTML Validator

Uma prática extensão que permite a validação do HTML de qualquer página, sendo que linhas com erros e avisos são automática e devidamente destacadas.

A extensão também permite que qualquer site seja adicionado à uma lista de exceções, além de contar com links que redirecionam o usuário aos serviços de validação do W3C.

9) Wappalyzer

Extensão Firefox - Wappalyzer

Descubra rapidamente todas as tecnologias utilizadas em qualquer website, incluindo bancos de dados, CMSs, informações a respeito do servidor, etc.

O Wappalyzer é capaz de determinar quais são as fontes utilizadas, os sistemas de cache, o CMS e sua versão, a presença e a versão do PHP, qual o servidor utilizado (por exemplo: Apache), qual o framework JavaScript, e assim por diante.

10) PixelZoomer

Extensão Firefox - PixelZoomer

A PixelZoomer é um pouco semelhante à MeasureIt e à ColorZilla (veja acima). Pense na MeasureIt como um “mix” entre estas duas extensões. Porém, trata-se de uma extensão com bem mais recursos de análise de pixels e dimensões.

Ela captura uma screenshot da página web que você deseja analisar e então permite que retângulos sejam desenhados com o mouse para que as dimensões de qualquer seção ou elemento sejam obtidas.

A extensão também oferece zoom e conta com um “eye dropper”: posicione-o sobre qualquer elemento e obtenha seu código de cor HTML.

Outras extensões

Conheça também outras ótimas extensões para o Mozilla Firefox. Dê uma lida nos artigos abaixo, nos quais comentamos sobre elas:

Você pode se interessar

Como remover sugestões de URL da barra de endereços do Chrome
Dicas
4 visualizações
Dicas
4 visualizações

Como remover sugestões de URL da barra de endereços do Chrome

Carlos L. A. da Silva - 9 de abril de 2020

Navegador guarda qualquer endereço visitado e sugere pra você, mas você não precisa apagar o Histórico inteiro para se livrar de um deles.

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19
Notícias
8 visualizações
Notícias
8 visualizações

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19

Redação - 7 de abril de 2020

A IBM está expandindo o desafio global Call For Code 2020 para abordar a reação do mundo com o COVID–19, além das mudanças climáticas: duas questões urgentes que podem comprometer nossa saúde, nosso planeta e nossa sobrevivência.

Que fim levou o Windows Phone?
Artigos
10 visualizações
Artigos
10 visualizações

Que fim levou o Windows Phone?

Carlos L. A. da Silva - 6 de abril de 2020

A longa história de estratégias equivocadas da Microsoft em dispositivos móveis e o fim de um sonho.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (03/04)
Notícias
19 visualizações
19 visualizações

Promoções de Jogos do Final de Semana (03/04)

Carlos L. A. da Silva - 3 de abril de 2020
Como descobrir se tem um “fantasma” no seu teclado
Dicas
20 visualizações
20 visualizações

Como descobrir se tem um “fantasma” no seu teclado

Carlos L. A. da Silva - 2 de abril de 2020
Trabalhando de casa
Artigos
30 visualizações
30 visualizações

Trabalhando de casa

Carlos L. A. da Silva - 30 de março de 2020
Promoções de Jogos do Final de Semana (27/03)
Notícias
29 visualizações
29 visualizações

Promoções de Jogos do Final de Semana (27/03)

Carlos L. A. da Silva - 27 de março de 2020