Tudo o que você precisa saber sobre as ferramentas de desenvolvedor do Firefox

O Firefox Developer Edition é uma versão especial do Firefox que foi feita sob medida para desenvolvedores. Ele apresenta todos os recursos mais recentes do Firefox, juntamente com uma série de ferramentas de desenvolvedor especializadas. Aqui, irei fornecer um guia de seus recursos para que você saiba tudo o que há para saber sobre as Ferramentas de Desenvolvedor do Firefox.

Interface de usuário

Depois de instalar o Firefox Developer Edition, você notará que ele parece um pouco diferente da barra de ferramentas padrão do Firefox. O Firefox certamente adotou uma abordagem mais centrada no desenvolvedor ao projetar sua barra de ferramentas, tornando-a mais estreita em sua aparência e decorada com muito mais botões por padrão.

O tema padrão para Firefox Developer Tools é escuro, o que provavelmente é o resultado de testes de usuários. No entanto, se você não gosta do tema escuro, pode sempre desligar o tema da edição do desenvolvedor acessando Menu> Personalizar .

Ferramentas de Criação

O Firefox Developer Edition vem com uma série de ferramentas de criação, que são projetadas para os sites de criação e aplicativos da web. Abaixo, forneci um resumo das ferramentas e seus benefícios para que você não precise procurar por essas informações.

Caderno de Rabiscos

Essa ferramenta dá aos desenvolvedores da web a oportunidade de experimentar o código JavaScript. No ambiente fornecido pelo Scratchpad, você pode escrever, executar e examinar os resultados do código que interage com a página atual.

Para abrir o Scratchpad, basta pressionar Shift F4 ou ir ao menu Web Developer e clicar em Scratchpad. Isso abrirá a janela onde você pode escrever seu código. Quando terminar, clique em Executar> Executar e o código será executado na guia atual.

Editor de Estilos

O Editor de estilo permite que os desenvolvedores da web visualizem e editem todas as folhas de estilo com a página associada. Você também poderá criar novas folhas de estilo do zero e aplicá-las a uma página, bem como importar folhas de estilo existentes e aplicá-las à página atual.

Para abrir o Editor de Estilos, vá ao menu Desenvolvedor da Web e clique em Editor de Estilos . A caixa de ferramentas do desenvolvedor do Firefox aparecerá na parte inferior do navegador com o Editor de estilos pronto para uso.

Editor de Shader

Usar o Shader Editor no Firefox é simples. Os desenvolvedores podem visualizar e editar totalmente os shaders de fragmento e o vértice conforme usado pelo WebGL. E rapidamente para quem não sabe, o WebGL usa JavaScript (por meio de uma API) de maneira inteligente para renderizar gráficos 2D e 3D diretamente no navegador Firefox, sem exigir o uso de plug-ins.

Para usar o Shader Editor, é necessário habilitá-lo primeiro. Para fazer isso, vá para as configurações da caixa de ferramentas e marque a caixa ao lado de 'Editor de Shader'. O Shader Editor será exibido na barra de ferramentas do Firefox. Clique nele e você poderá abri-lo.

Editor de áudio da web

A API do Web Audio Editor permite que os desenvolvedores criem contexto de áudio. Os desenvolvedores precisarão criar nós de áudio fornecendo:

• Fontes de áudio
• Nós que realizam transformações
• Notas que representam o destino escolhido para o fluxo de áudio.

O Editor de Áudio da Web examinará os aspectos de áudio de uma página e fornecerá uma representação visual em um gráfico. Isso permite que os desenvolvedores examinem a funcionalidade e a operação e verifiquem se todos os nós se conectam corretamente. Os desenvolvedores podem editar e examinar as propriedades do nó AudioParam, bem como outras propriedades também.

Como o Shader Editor, o Web Audio Editor deve ser ativado manualmente e não é uma configuração padrão. Ativar é fácil: basta voltar para Configurações da ferramenta de desenvolvedor e marcar a caixa ao lado de 'Áudio da Web'. Você verá que há uma guia adicional exibida na barra de ferramentas do Firefox Toolbox. Basta clicar nesta guia e uma página será carregada a partir da qual você pode construir um contexto de áudio.

Ferramentas de depuração

As ferramentas de depuração do Firefox são projetadas para examinar, explorar e depurar sites e aplicativos da web. A seguir, descrevi os principais recursos de algumas dessas ferramentas e seus benefícios.

Inspetor de página

A ferramenta Page Inspector permite que os desenvolvedores inspecionem e editem a codificação HTML e CSS de uma página da web. Usando essa ferramenta, os desenvolvedores podem investigar páginas por meio da versão carregada localmente ou por meio de um destino remoto.

Abrir o Inspetor de página é fácil. Se você selecionou um elemento, pode simplesmente clicar com o botão direito no elemento e selecionar 'Inspecionar elemento'. Como alternativa, você pode ir para o menu do desenvolvedor da Web e clicar na opção Inspetor. O Inspetor de página aparecerá na parte inferior do seu navegador.

Console da web

Essa ferramenta registra todas as informações associadas a uma página da web, como solicitações de rede, JavaScript, CSS, erros e avisos de segurança, avisos de erro e mensagens informativas. Ele também permite que você interaja com uma página da web usando JavaScript.

O console da Web foi projetado para substituir o antigo console de erro, que fazia parte originalmente das ferramentas de desenvolvedor do Firefox. Considerando que o Console de erro forneceu uma lista enorme de erros de várias páginas, o console da web mostrará apenas informações associadas a uma página da web específica, tornando-a, portanto, mais útil.

Para abrir o Console da Web, vá para o submenu Desenvolvedor da Web no menu do Firefox e clique em 'Console da Web'. Você também pode usar o atalho Ctrl Shift K. A caixa de ferramentas aparecerá na parte inferior do navegador com o 'Console' ativado.

Depurador

A ferramenta Firefox Debugger oferece aos desenvolvedores da web a oportunidade de examinar e modificar seu código JavaScript. Também pode ser usado para identificar bugs. Usando o Depurador, você pode depurar código localmente no Firefox ou remotamente em um dispositivo Firefox OS ou Firefox para Android.

Para abrir o depurador, vá ao submenu Web Developer no menu principal do Firefox e clique em 'Debugger'. Alternativamente, você pode pressionar Ctrl Shift S e a caixa de ferramentas aparecerá na parte inferior do seu navegador com o Depurador ativado e pronto para uso.

Monitor de rede

O Monitor de rede foi projetado para mostrar todas as diferentes solicitações de rede feitas pelo Firefox, quanto tempo cada solicitação leva e os detalhes de cada solicitação. Vá para o menu do desenvolvedor da Web> Rede para ativar a ferramenta. Você precisará atualizar a página para ver as solicitações.

No Monitor de rede, você poderá ver uma linha do tempo das solicitações e filtrar o conteúdo por tipo. Há também uma ferramenta de análise de desempenho, que você pode usar para ver quanto tempo o navegador leva para baixar diferentes partes do seu site. Para executar essa ferramenta, basta clicar no ícone do cronômetro na barra de ferramentas na parte inferior do Monitor de rede.

Inspetor de Armazenamento

Se quiser saber mais sobre os diferentes tipos de armazenamento que uma página da web pode usar, será necessário habilitar a ferramenta Storage Inspector. Como está atualmente, o Storage Inspector pode ser usado para inspecionar Cookies, Armazenamento Local, Armazenamento de Sessão e IndexedDB.

O Storage Inspector fornece uma visualização somente leitura do armazenamento. No entanto, o Firefox disse que está trabalhando no desenvolvimento da ferramenta para que os desenvolvedores possam editar seu conteúdo de armazenamento no futuro.

Para abrir o Storage Inspector, vá para o Submenu Web Developer e clique em Storage Inspector. Como alternativa, você pode pressionar Shift + F9 para usar o atalho do teclado.

Barra de Ferramentas do Desenvolvedor

A barra de ferramentas do desenvolvedor foi projetada para fornecer ao desenvolvedor da web acesso de linha de comando a várias ferramentas de desenvolvedor do Firefox. Além de usar os comandos configurados pelo Firefox, que você encontra aqui, você também pode adicionar seus próprios comandos usando o Scratchpad. Eles podem ser convertidos em complementos para que outras pessoas também possam usá-los.

Abra a Barra de Ferramentas do Desenvolvedor pressionando Shift + F2. Como alternativa, você pode ir para o menu do desenvolvedor da Web e clicar na barra de ferramentas do desenvolvedor.

Outras ferramentas de depuração - visualização 3D, conta-gotas, iFrames

Outras ferramentas de depuração incluídas no pacote Firefox Developer Tools incluem:

• Visualização em 3D: oferece uma visualização em 3D de seus blocos aninhados de HTML e conteúdo
• Conta-gotas: permite selecionar uma cor específica da página e copiá-la para a área de transferência)
• Seleção de iframes: permite apontar as ferramentas de desenvolvedor para iframes específicos em um documento.

Ferramentas Móveis

Além das ferramentas de criação e depuração do Firefox, também há uma série de ferramentas móveis que os desenvolvedores podem utilizar para desenvolvimentos móveis. Vou passar por isso na íntegra abaixo.

Gerenciador de aplicativos

Esta ferramenta permite aos desenvolvedores testar, implantar e depurar aplicativos HTML5 em dispositivos Firefox OS. Ele também atua como um simulador para que os testes possam ser realizados diretamente do navegador Firefox para desktop.

O App Manager é entregue com um painel de aplicativos, onde os desenvolvedores podem gerenciar aplicativos locais e aplicativos hospedados externamente; um painel Dispositivo, que fornece informações sobre um dispositivo conectado, como sua versão do sistema operacional e os aplicativos instalados; e caixas de ferramentas, que são um conjunto de ferramentas de desenvolvedor do Firefox que podem ser usadas no aplicativo em execução.

WebIDE

Esta ferramenta móvel permite que os desenvolvedores criem, editem, executem e depurem seus aplicativos da web por meio do Firefox OS Simulator ou de um dispositivo Firefox OS. Você pode usá-lo para se conectar às Ferramentas de desenvolvedor do Firefox com outros navegadores, como Firefox para Android e Chrome para Android.

Outras ferramentas móveis

Outras ferramentas móveis incluem:

• Depuração remota para Firefox para Android
• Firefox OS Simulator: Simula um dispositivo Firefox OS, mas funciona em um desktop
• Visualização de design responsivo: permite que você visualize a aparência do seu site ou aplicativo da web em diferentes dispositivos com diferentes tamanhos de tela.

Ferramentas de Performance

O desempenho é crítico no desenvolvimento da web, e é por isso que o Firefox fornece aos desenvolvedores da web uma série de ferramentas que podem ser usadas para diagnosticar e corrigir quaisquer problemas de desempenho com seus sites e aplicativos da web.

Ferramenta de desempenho

A ferramenta Performance substituiu o gerador de perfil de amostragem JavaScript original do Firefox. Ele ainda contém uma versão atualizada do perfil de amostragem; no entanto, também possui uma linha do tempo de taxa de quadros. Mais recursos são esperados no futuro.

A ferramenta Performance pode ser usada para criar, analisar e amostrar perfis.

JavaScript Profiler

O JavaScript Profiler foi projetado para ajudar os desenvolvedores a encontrar problemas em seu código JavaScript. Ele faz isso amostrando a pilha de chamadas JavaScript atual e fornecendo estatísticas sobre ela.

Ferramenta Paint Flashing

Essa ferramenta destacará a parte da página da web que o navegador precisa redesenhar em resposta a uma entrada. Ele permite que os desenvolvedores da web descubram se seu site está fazendo com que o navegador seja mais repintado do que o necessário. Lembre-se de que as repinturas podem ter um impacto negativo no seu desempenho, por isso é uma boa ideia usar essa ferramenta para eliminar as repinturas desnecessárias e melhorar o desempenho do seu site.

Perfil de desenvolvedor separado

Ter que alternar entre as versões do Firefox seria uma verdadeira dor. A boa notícia é que o Firefox Developer Edition usa um perfil totalmente separado de outras versões do Firefox que você instalou.

Notas de versão do desenvolvedor

Os desenvolvedores que desejam ler as notas relacionadas aos lançamentos atuais e históricos do Firefox Developer Edition podem fazer isso simplesmente visitando este link.

Empacotando

Se você é um desenvolvedor web novo ou experiente, você se beneficiará muito com o uso das detalhadas e variadas Ferramentas de desenvolvedor do Firefox. Desde a criação de código até a depuração de HTML, as ferramentas permitem que você execute uma ampla gama de ações que são necessárias para desenvolver um site ou aplicativo da web. As ferramentas móveis são também extremamente útil, especialmente para aqueles que procuram criar sites sensíveis, a fim de beneficiar das últimas ⁽²¹ abril 2015) atualização algoritmo do Google.

Para obter mais informações sobre as Ferramentas de desenvolvedor do Firefox, vá para o site Mozilla Developer e junte-se à comunidade de desenvolvedores. O Firefox Developer Edition é gratuito para download e uso.