Abaixo estão os recursos e dicas para usar o Firefox Developer Tools. Alguns deles são semelhantes aos recursos das ferramentas do Chrome, para alguns não há análogos em outros navegadores.

Cuidado, sob o corte de muitos gifs pesados!

Inspetor

Pesquisa de seletor CSS

É muito conveniente usar para:

• elementos com `z-index` que não podem ser clicados
• visualmente os mesmos elementos para os quais você conhece o seletor

Filtro de estilo

Você pode filtrar regras CSS por qualquer seletor ou propriedade.

Para seletores, o filtro destaca os seletores na lista de regras. Para propriedades, a ferramenta expandirá todas as propriedades que contêm seu filtro, as realçará com cores e também ocultará as regras nas quais não há propriedades do filtro.

Seletor de cores e conta-gotas

Clique em qualquer ponto com cor no inspetor para abrir uma ferramenta conveniente.

Alterar representações de cores

Shift + clique em um ponto de cor permite alterar a representação de cores (nome / hex / hsl / rgb).

Shift + clique em um ponto próximo ao canto permite alterar as unidades do ângulo.

Editando curvas de Bezier de funções de tempo

Clique em um ponto com uma linha curva ao lado da propriedade da função de tempo para abrir um editor conveniente. Haverá funções predefinidas e a capacidade de configurar manualmente sua versão.

Console

Aplicação CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

Nem todas as propriedades são suportadas, mas muitas .

Pesquisa de Histórico

Pressione CTRL + R no Mac (e F9 no Windows e Linux). Em seguida, use CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) para rolar para frente / para trás. Diferentemente das setas, os atalhos de teclado acima funcionam entre as sessões.

Captura de tela de uma página ou seu elemento

 :screenshot — fullpage :screenshot — selector .css-selector 

É muito mais conveniente simplesmente especificar o seletor do que tentar selecionar com precisão a área desejada com o mouse.

Alternância de contexto JavaScript

 cd(iframe) 

Você pode alternar para o contexto iframe pelo seletor usando cd () .

Tags do temporizador

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

Inicie o timer - console.time ("label") ,

pare com isso - console.timeEnd ("label") .

Depurador JavaScript

Pontos de interrupção condicionais

Para criar um ponto, clique com o botão direito do mouse no número da linha. O ponto estará ativo apenas se a condição for atendida.

Pesquise pelo nome da função ou número da linha

A pesquisa do nome do arquivo é CMD + P no Mac (e CTRL + P no Windows e Linux).

Digite " @" na mesma entrada para procurar por declaração de função no arquivo.

Digite ": " na mesma entrada para chegar rapidamente à linha pelo seu número.

Saída de código reduzido bonita

Clique no ícone {} para ver um código bonito em vez de um código minificado.

Pontos de interrupção de URL

O ponto ficará ativo quando você tentar acessar o URL e mostrar o código responsável por acessá-lo.

Desativar pontos de interrupção

Os pontos desativados permanecerão disponíveis para inclusão e uso futuro.

Rede

Editando e encaminhando solicitações HTTP

Edite solicitações enviadas e reenvie-as.

Filtro de consulta

O filtro de domínio é CMD + F no Mac (ou CTRL + F no Windows e Linux).

Se você precisar encontrar todas as consultas sem um domínio , adicione um traço ( - ) na frente do filtro.

Limite de velocidade

Verifique como o site será carregado quando a Internet estiver lenta.

Perfil quente / frio

Clique no ícone do cronômetro para ver o desempenho da consulta que o site faz. A página será carregada duas vezes - sem um cache (emulando a primeira carga) e com um cache (emulando uma chamada repetida).

Salvando / Carregando HAR

Salvamos as solicitações perfeitas no formato de arquivo . Conveniente para compartilhar com outros desenvolvedores.

Design Responsivo

Dispositivo personalizado

Veja como o site procurará dispositivos com resolução personalizada.

Limite de velocidade

Estamos assistindo o download da versão móvel na velocidade da Internet móvel.

Emulação de tachi

Um pequeno ícone com uma "mão" é responsável por isso. Emulado, incluindo tapas longas.

Alterar agente do usuário

Não se esqueça de ativar a opção "Recarregar a página ao alterar o UA" nas configurações - economize tempo.

Alinhamento da janela de visualização esquerda

Conveniente se você deseja colocar os painéis à direita (por exemplo, para depuração).

Inspetor de armazém

Editando Cookies

Clique duas vezes na célula cujo valor você deseja alterar.

Remoção de Cookies

A maneira mais fácil de excluir cookies é selecionando-os e clicando em Backsapce.

Preste atenção às opções do menu de contexto. A opção "Excluir tudo para um domínio" é muito conveniente, mas lembre-se de que o domínio deve ser preciso (por exemplo, excluir cookies para .medium.com não os excluirá para medium.com )

Cookies de alteração em tempo real

Os cookies que acabaram de ser alterados estão piscando em laranja.

Instantâneos estáticos para IndexedDB

Você não poderá ver alterações nos registros do IndexedDB em tempo real; portanto, use o botão Atualizar para obter o instantâneo mais atualizado do banco de dados.

Alterando as Colunas da Tabela Exibidas

Clicar com o botão direito do mouse no cabeçalho da tabela ajudará a ocultar colunas desinteressantes.

Isso é tudo. Espero que as dicas tenham sido úteis!