Firefox Developer Edition 6 Ferramentas mais legais para experimentar

A edição do desenvolvedor do Firefox é o único navegador hoje feito especialmente para desenvolvedores. As ferramentas do desenvolvedor na edição padrão aparecem em primeiro lugar na edição do desenvolvedor e há ferramentas na edição do desenvolvedor que não são e não serão disponibilizadas na edição padrão. Hoje vamos dar uma olhada em algumas das ferramentas que no momento pode ser encontrado apenas na edição do desenvolvedor.

Se você é alguém que nunca usou ou que não está muito familiarizado com ferramentas de desenvolvedor, mesmo aqueles na edição padrão, confira este cool "DevTools Challenger" da Mozilla primeiro. Aqui você pode praticar com algumas das ferramentas mencionadas abaixo no navegador Firefox Developer Edition. Os exemplos são divertidos e fáceis de seguir, as instruções são simples e, se você não conseguir acompanhar, basta seguir o tutorial em vídeo.

1. Ferramenta de inspecção de animação

As animações CSS estão se tornando cada vez mais comuns, e as ferramentas de animação CSS fornecidas pela edição do desenvolvedor do Firefox facilitam o acompanhamento e a inspeção de cada etapa da animação criada. Você pode pausar, reproduzir e reverter qualquer animação; você também pode vê-lo acontecendo quadro a quadro via scrubbing.

Para acessar a ferramenta, abra o Inspetor Clique com o botão direito do mouse no elemento de animação e selecione "inspecionar elemento", então, no lado direito da janela da ferramenta de desenvolvimento, clique em "Animações".

2. Editor de funções de temporização de animação

O tempo de animação é editável na ferramenta dev, basta clicar no ícone ao lado da função no Regras seção do Inspetor ferramenta e um pop-up mostrando as curvas de função se abre. Você pode arrastar e modificar isso para ajustar o tempo da animação. Depois de fazer as alterações nas curvas, sua velocidade de animação mudará de acordo.

Se você ainda não está familiarizado com a função de animação cúbica de Bezier, recomendo este post para saber mais sobre isso.

3. Color Picker para propriedades CSS

Já existe um seletor de cores disponível na edição padrão do Firefox (leia mais sobre isso neste post), que pega uma cor da página e a copia para a área de transferência. O seletor de cores que estou mencionando agora é específico para os valores de cor CSS das propriedades.

Além de todos os valores de cores CSS no Regras seção do Inspetor ferramenta, há um ícone que abrirá uma roda de cores quando clicada. Você pode selecionar qual cor você quer da roda.

Se você já tiver uma cor desejada e outra que esteja na página, basta clicar na ferramenta Conta-gotas na parte inferior do pop-up para abrir o seletor de cores, arrastar o seletor até a cor desejada e clicar nele. . O valor da cor CSS será alterado para o da cor selecionada.

4. Ferramenta de medição

Essa ferramenta permite ver a posição XY do cursor e a medida da altura, largura e diagonal em pixels de uma parte selecionada. Para usar a ferramenta, você precisará primeiro ativá-la no desenvolvedor Opções da caixa de ferramentas, marcando a caixa de seleção "Medir uma parte da página" em "Botões disponíveis da caixa de ferramentas".

Uma vez ativado, um ícone de régua aparecerá no topo da janela da ferramenta de desenvolvimento, clique no ícone e mova o cursor sobre a página. Você verá as posições XY perto do cursor. Para medir a largura, a altura e a diagonal, basta clicar e arrastar para selecionar a parte que deseja medir.

5. editor de filtros CSS

Se você aplicou o filtro CSS a um elemento na página, verá um ícone ao lado dele no Regras seção do Inspetor ferramenta, que abre um editor de filtros CSS após o clique.

Para remover um filtro, clique na marca × na extremidade direita do nome do filtro. Para adicionar um filtro, clique na caixa de filtro na parte inferior e selecione o que você deseja adicionar e clique no + placa. Você também pode reorganizar os filtros em qualquer ordem arrastando cada item.

6. ferramenta de memória

Você pode descobrir o que está ocupando a memória em sua página da Web, com a ajuda desta ferramenta. Isso ajuda você a tomar medidas para reduzir o uso de memória e melhorar a velocidade da sua página..

Para usar a ferramenta, você terá que ativá-lo primeiro a partir do Opções da caixa de ferramentas marcando a caixa de seleção chamada "Memory" em "Default Firefox Developer Tools". Uma vez marcada, você verá a seção "Memory" no topo da janela da ferramenta dev logo após "Performance". Selecione isso.

Para usar a ferramenta, clique em "Tirar foto" ou no botão da câmera. Você verá uma lista de itens, como objetos e scripts que estão ocupando memória .