Uma olhada nas ferramentas essenciais do Firefox para desenvolvedores da Web

O Firefox tem sido o navegador preferido para o desenvolvimento web. Há uma série de complementos úteis para fazer o trabalho. Neste post, vamos dar uma olhada em alguns complementos que eu acho que é essencial para ser instalado se você for fazer um desenvolvimento web. Também vamos descobrir alguns dos recursos desses complementos que podem ajudar.

Primeiro de tudo, precisamos instalar o Firebug.

Firebug

O Firebug é um complemento obrigatório para o desenvolvimento da web. Supondo que você não saiba onde obter o Firebug, você pode instalá-lo aqui. Provavelmente, você precisa reiniciar o seu Firefox antes de ser ativado.

Depois disso, você pode ver o Firebug através de uma das seguintes formas: siga este menu Ferramentas> Desenvolvedores Web> Firebug, clique com o botão direito do mouse na página da web e escolha “Inspecionar o elemento com o Firebug”.

Alternativamente, você pode encontrar um ícone do Firebug no Firefox e clicar nele, isso mostrará a janela do firebug;

Firebug é bastante idêntico ao Ferramentas para desenvolvedores do Chrome. tem um painel para ver a estrutura HTML e os estilos, e também um painel Console para ver os erros, avisos e logs. Mas eu tenho mais algumas dicas que você pode achar úteis.

Ajustando o tamanho da caixa

O elemento HTML é composto pelo modelo de caixa CSS que consiste em margem, preenchimento e dimensão do objeto (largura / altura). Há momentos em que podemos precisar modificar essas propriedades. Nesse caso, você pode selecionar um dos elementos que deseja alterar e, em seguida, Layout painel.

Neste painel, você encontrará uma ilustração de um modelo de caixa CSS juntamente com suas informações, incluindo as largura e altura. Mesmo que essas duas propriedades não sejam especificadas em CSS, essa ferramenta é inteligente o suficiente para determinar o valor. Se você precisar modificá-los, basta clicar no valor e usar a tecla de seta para cima ou para baixo para aumentar ou diminuir o valor..

Estilos computados

Em muitas situações, você provavelmente está se perguntando por que certos estilos não são aplicados. Uma das maneiras mais fáceis e rápidas, especialmente quando você tem milhares de linhas de estilos, é inspecioná-lo a partir do Estilo computado painel. Este exemplo mostra que a cor do texto da tag de âncora é sobrescrita por .botão classe, enquanto o fundo do .botão classe é sobrescrita por .button.add.

Inspecionando a Família de Fontes (o caminho mais fácil)

Você provavelmente encontrará algo assim em família de fontes propriedade em CSS com várias famílias de fontes. Infelizmente, isso não nos diz especificamente qual fonte o navegador usa. Para facilitar a identificação, podemos instalar essa extensão do Firebug, FireFontFamily.

Após a conclusão da instalação, carregue sua página da web e agora podemos ver claramente qual família de fontes é aplicada. No nosso caso, é de fato Helvetica Neue (veja foto).

Analisando o desempenho

Isso pode ser trivial, mas a velocidade do site agora é um dos parâmetros do Google (algoritmo) para decidir a qualidade do site; o site que carrega mais rápido é considerado bem desenvolvido e classificado em termos de conteúdo. Então a velocidade não é algo que deva ser negligenciado.

Painel de Rede

O primeiro lugar que você pode precisar visitar para inspecionar o desempenho do seu site é o Líquido painel. Este painel registrará a solicitação HTTP do seu site quando ele for carregado. Esta captura de tela abaixo mostra uma página da Web que é carregada Pedido 42 e leva ao redor 4,36 segundos carregar.

Você pode classificar a solicitação HTTP no tipo, como HTML, CSS e Imagens..

Yslow!

Além disso, você também pode instalar YSlow, uma extensão para o Firebug do Yahoo !. Depois que ele for ativado, você encontrará um painel adicional chamado expressamente Yslow!.

Igual a Líquido painel, Yslow! irá gravar as performances da página quando ela estiver sendo carregada, mas também informará por que a página da web está lenta e o que podemos fazer para solucioná-la. Neste exemplo, executamos um teste em uma página da web e ele é pontuado 86 para desempenho geral, que é considerado OK.

Velocidade da página

Como alternativa, você também pode instalar o Page Speed ​​do Google. Igual a Yslow!, Ele testa o desempenho da velocidade do site, embora o resultado do teste possa ser um pouco diferente. Este exemplo mostra que a mesma página da Web marcou 82 de acordo com o Page Speed.

Ferramentas para desenvolvedores da web

Web Developers Tools é, obviamente, para desenvolvedores da web e tem um monte de recursos embalados nesta barra de ferramentas. Mas este abaixo é um dos meus favoritos.

Inspeção de Imagem

Há momentos em que podemos precisar obter informações sobre a imagem na página da web. Eu geralmente vejo pessoas fazendo isso tropeçando no navegador ou clicando com o botão direito na imagem e selecionando Visualizar informações da imagem, igual a:

Mas desta forma não é muito eficiente quando precisamos obter as informações de muitas imagens. Nesse caso, podemos utilizar o Imagens recurso do complemento. Esse recurso é facilmente acessível a partir do menu Imagem da barra de ferramentas.

E, este exemplo mostra como mostramos a dimensão da imagem e o tamanho do arquivo de imagem simultaneamente:

Ferramentas internas do Firefox

Em versões recentes, o Firefox aprimorou enormemente seus recursos internos para desenvolvedores da Web, alguns deles são:

Elemento de Inspeção Nativa

Este nativo Inspecionar elemento do Firefox pode ser semelhante a “Inspecionar elemento no Firebug”, mas na verdade age de maneiras diferentes.

Dessa vez, não irei mais aprofundar esse recurso, pois ele é essencialmente idêntico ao painel HTML e CSS do Firebug, embora com uma diferença no layout e no design. Mas, há uma característica distinta que vale a pena experimentar, a Vista 3D.

Usando Vista 3D você pode ver a estrutura da página em profundidade. Para ativar esta visão, você pode encontrar o botão na parte inferior direita do “Elemento de Inspeção Nativa do Firefox”. É assim que o Vista 3D parece.

Eu não uso isso com a mesma frequência que outros recursos, mas é uma característica bastante inovadora da Mozilla, eu admito, e certamente muito útil em certas situações..

Visão de Web Design

Desde a crescente popularidade no Web Design Responsivo, o Firefox iniciou um Bookmarklet Responsivo para o Navegador. Essa ferramenta nos permitirá testar nosso website responsivo em diferentes viewports sem redimensionar a janela do navegador.

Esta visualização está disponível neste menu: Ferramentas> Desenvolvedor Web> Web Design View. E é assim que a vista se parece.

Editor de estilo

Por fim, se você estiver trabalhando com CSS com frequência, provavelmente se apaixonará por esse recurso. Desde a versão do 11, o Firefox tinha adicionado Editor de estilo em suas ferramentas de desenvolvedor nativas.

Esse recurso é tão legal quanto o Visão de Web Design, Ele permite que você edite o CSS, veja o impacto instantaneamente no navegador e salve as alterações que afetam diretamente o arquivo de origem CSS.

O Editor de Estilos está disponível no seguinte menu: Ferramentas> Desenvolvedor Web> Editor de Estilo.

Pensamento final

Há um monte de recursos embalados nestes complementos do Firefox e aqueles discutidos aqui são apenas alguns dos recursos que eu utilizo com bastante frequência durante o desenvolvimento web. No entanto, você pode ter algumas outras dicas que podem ser úteis para aumentar a produtividade do desenvolvimento web no Firefox.

Quais recursos você usa com frequência? Você pode compartilhar seus pensamentos na caixa de comentários abaixo.