10 ferramentas úteis para desenvolvedores do Firefox que você deve conhecer
O Firefox, que é o "navegador do desenvolvedor", tem muitas ótimas ferramentas para ajudar a tornar nosso trabalho mais fácil. Você pode encontrar mais informações sobre sua coleção de ferramentas na página do Firefox Developer Tools e também pode experimentar o navegador Developer Edition, que tem mais recursos e ferramentas que estão sendo testadas.
Para este post, eu listei 10 ferramentas úteis você pode gostar de sua coleção de ferramentas de desenvolvedor. Também demonstrei o que essas ferramentas podem fazer com GIFs, além de como acessá-las para referência rápida.
1. Visualizar réguas horizontais e verticais
O Firefox tem uma ferramenta de régua que exibe réguas horizontais e verticais com unidades de pixel na página. A ferramenta é útil para organizar seus elementos na página.
Para acessar as réguas pelo menu, vá para: ☰> Desenvolvedor > Barra de Ferramentas do Desenvolvedor (atalho: Shift + F2). Quando a barra de ferramentas aparecer na parte inferior da página, digite governantes e pressione Entrar.
Para que isso apareça na janela de ferramentas do desenvolvedor, vá para "Opções da caixa de ferramentas". Na seção "Botões disponíveis da caixa de ferramentas", marque a opção "Alternar réguas para a página"checkbox.
2. Faça capturas de tela usando seletores de CSS
Embora a barra de ferramentas do Firefox permita tirar screenshots da página inteira ou partes visíveis, na minha opinião o método de seleção de CSS é mais útil para capturar screenshots de elementos individuais bem como para elementos que são visíveis no mouse-pairar somente (como menus).
Para tirar screenshots através do menu, vá para ☰> Desenvolvedor > Barra de Ferramentas do Desenvolvedor (shortcutShift + F2). Quando a barra de ferramentas aparecer na parte inferior da página, digite captura de tela --selector any_unique_css_selector e pressione entrar.
Para fazer isso aparecer na janela de ferramentas do desenvolvedor: clique em "Opções da caixa de ferramentas" e, na seção "Botões disponíveis na caixa de ferramentas", marque "Faça uma captura de tela completa " caixa de seleção.
3. Escolha cores de páginas da web
O Firefox tem uma ferramenta de seleção de cores incorporada com o nome de "Conta-gotas". Para acessar a ferramenta "Eyedropper" no menu, vá para ☰> Desenvolvedor > Conta-gotas.
Para fazer isso aparecer na janela de ferramentas do desenvolvedor: clique em "Opções da Caixa de Ferramentas" e, na seção "Botões da Caixa de Ferramentas Disponíveis", marque "Pegue uma cor da página"checkbox.
4. Visualize o layout da página em 3D
A visualização de páginas da Web em 3D ajuda com problemas de layout. Você poderá ver os diferentes elementos em camadas com muito mais clareza na visualização em 3D. Para visualizar a página da web em 3D, clique no botão da ferramenta "Visualização 3D".
Para que isso apareça na janela de ferramentas do desenvolvedor, clique em "Opções da Caixa de Ferramentas" e, na seção "Botões da Caixa de Ferramentas Disponíveis", marque a opção "Vista 3D"checkbox.
5. Visualizar o estilo do navegador
Os estilos do navegador consistem em dois tipos: o estilo padrão que um navegador atribui para cada elemento e os estilos específicos do navegador (aqueles com o prefixo do navegador). Ao dar uma olhada nos estilos do navegador, você poderá diagnosticar quaisquer problemas de substituição na sua folha de estilo e também conhecer os estilos específicos de navegadores existentes .
Para acessar "Estilos do navegador" no menu, vá para ☰> Desenvolvedor > Inspetor. Em seguida, clique na guia "Computado" na seção direita e marque a caixa de seleção "Estilos do navegador".
Você também pode abrir o "Inspetor"navegue pelo atalho Ctrl + Shift + C e acesse" Estilos do navegador ".
6. Desativar o JavaScript para a sessão atual
Para melhores práticas e compatibilidade de leitor de tela, é sempre aconselhável codificar qualquer site de maneira que sua funcionalidade não seja prejudicada em um ambiente desabilitado por javascript. Para testar esses ambientes, você pode desativar o JavaScript para a sessão em que você está trabalhando.
Para desativar o JavaScript para a sessão atual, clique em "Opções da Caixa de Ferramentas" e, na seção "Configurações avançadas", marque a opção "Desativar JavaScript* "checkbox.
7. Ocultar o estilo CSS da página
Assim como o JavaScript, devido a questões de acessibilidade, é melhor criar sites de tal forma que as páginas ainda devem ser legíveis mesmo sem estilos. Para ver como a página fica sem estilo, você pode desativá-las nas ferramentas do desenvolvedor.
Para remover qualquer estilo CSS (interno, interno ou externo) aplicado em uma página da Web, apenas clique no símbolo do olho das folhas de estilo listadas na guia "Editor de estilo". Clique novamente para reverter para a vista original.
Para acessar o "Style Editor" através do menu, vá para ☰> Desenvolvedor > Editor de estilo (atalho: Shift + F7.
8. Visualize a resposta do conteúdo HTML para uma solicitação
Ferramentas de desenvolvedor do Firefox tem uma opção para visualizar as respostas do tipo de conteúdo HTML. Isso ajuda o desenvolvedor a visualizar todos os redirecionamentos 302 e verificar se alguma informação sensível foi renderizada ou não na resposta.
Para acessar "Visualizar" através do menu, vá para ☰> Desenvolvedor > Rede (atalho: Ctrl + Shift + Q. Em seguida, abra a página da Web de sua escolha ou recarregue a página atual, clique no solicitação desejada (com resposta HTML) da lista de solicitações e clique no botão "Visualizar"guia na seção direita.
9. Visualizar página da web em diferentes tamanhos de tela
Para testar uma página da Web por sua capacidade de resposta, use a "Visualização de design responsivo", que pode ser acessada por ☰> Desenvolvedor > Vista de design responsivo ou com o atalho: Ctrl + Shift + M.
Para que o botão da ferramenta "Modo de design responsivo" apareça, clique em "Opções da caixa de ferramentas" e, na seção "Botões disponíveis da caixa de ferramentas", marque a caixa de seleção "Modo de design responsivo".
10. Executar JavaScript nas páginas
Para execuções rápidas de JavaScript em qualquer página da Web, simplesmente use a ferramenta "Scratchpad" do Firefox. Para acessar "Scratchpad" através do menu, vá para; ☰> Desenvolvedor > Caderno de Rabiscos ou use o atalho de teclado Shift + F4.
Para que o botão da ferramenta "Scratchpad" apareça na janela das ferramentas do desenvolvedor para uso rápido: clique em "Opções da caixa de ferramentas"e sob o"Botões Disponíveis da Caixa de Ferramentas"seção verificar o" Scratchpad " caixa de seleção.
