Como老婆de calçados infantis front-end, acredito que você deve estar familiarizado com o navegador Chrome.调页面,写BUG ,画样式e看php片, o mundo inteiro seria inútil sem ele.
Não acredite? Vamos ver o quão poderosas nossas老婆são...
Ao depurar conjuntamente a interface de back-end ou solucionar bugs online, você costuma ouvi-las dizer esta frase: Você tenta fazer outra solicitação e? deixe-me ver por que o erro ocorreu!
Existe uma maneira ridiculamente simples de reenviar a solicitação.
Selecione Network
clique em Fetch/XHR
selecione a solicitação para reenviar,
clique com o botão direito e selecione Replay XHR
Não há necessidade de atualizar a página ou interagir com ela. Não é muito legal? ! !
cenário de inicialização rápida de uma solicitação no console ou depuração conjunta ou correção de bugs, para a mesma solicitação, às vezes é necessário modificar os parâmetros de entrada e reiniciar.
Selecione Network
clique em Fetch/XHR
selecione Copy as fetch
console de busca, cole o código
para modificar os parâmetros e pressione Enter para finalizar
No passado, eu sempre lidava com isso alterando o código ou escrevendo fetch manualmente. Era realmente estúpido pensar nisso...
Se o seu código for calculado, ele produzirá um objeto complexo . e precisa ser copiado e enviado para outras pessoas, o que devo fazer?
Use a função copy para executar对象como parâmetro de entrada
No passado, eu sempre imprimia no console através de JSON.stringify(fetfishObj, null, 2) e depois copiava e colava manualmente. Isso era realmente ineficiente...
ao depurar a página web Após selecionar um elemento no painel Elements , e se você quiser saber alguns de seus atributos, como宽,高,位置, etc., através de JS ?
Selecione o elemento a ser depurado através Elements
e acesse o console diretamente com $0
Ocasionalmente, precisaremos fazer uma captura de tela de uma página da web. Uma tela é adequada. As capturas de tela integradas do sistema ou do WeChat podem ser feitas, mas é necessário capturar conteúdo que exceda. uma tela. O que fazer ?
Prepare o conteúdo que precisa ser capturado.
cmd + shift + p Execute o comando Command
e digite Capture full size screenshot e pressione Enter.
E se você quiser interceptar alguns elementos selecionados?
A resposta também é muito simples. Na terceira etapa, insira Capture node screenshot
Ao depurar elementos, você costuma expandi-los um por um para depurá-los quando o nível é relativamente profundo? Existe uma maneira mais rápida
de manter pressionada a tecla opt + clicar (o elemento mais externo que precisa ser expandido)
para ver este cenário. Acho que você deve ter encontrado vários processos em uma determinada string, e então queremos saber os resultados de cada etapa da execução. O que devemos fazer? .
'fatfish'.split('').reverse().join('') // hsiftaf você pode fazer isso
// Etapa 1 'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// Etapa 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i ', 'f', 't', 'a', 'f']
// Etapa 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
Uma maneira mais simples é
usar $_ para referenciar o resultado da operação anterior sem copiá-lo todas as vezes
// Etapa 1 'fatfish'.split('') // ['f', 'a', 't', ' peixe']
// Etapa 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Etapa 3 $_.join('') // hsiftaf
Alguns alunos gostam do tema branco do Chrome e outros gostam do preto. Podemos usar teclas de atalho para alternar rapidamente entre os dois temas.
cmd + shift + p execute o comando Command
e digite Switch to dark theme ou Switch to light theme para mudar o tema.
$ " e " $$ "são os requisitos mais comuns para usar document.querySelector e document.querySelectorAll no console $ selecionar elementos da página atual, mas na verdade é um pouco longo. e $$ substituto.
$i Instale o pacote npm diretamente no console.Você já encontrou esse cenário? Às vezes quero usar uma API como dayjs ou lodash , mas não quero ir ao site oficial para verificar. Seria bom se eu pudesse testá-la diretamente no console.
Console Importer é um plug-in usado para instalar pacotes npm diretamente no console.
Instale Console Importer
$i('name') para instalar o pacote npm
Suponha que exista o seguinte código. Esperamos que o ponto de interrupção seja acionado quando o nome do alimento for ? como podemos fazer isso?
const alimentos = [
{
nome: '?',
preço: 10
},
{
nome: '?',
Preço: 15
},
{
nome: '?',
Preço: 20
},
]
alimentos.forEach((v) => {
console.log(v.nome, v.preço)
}) Isso é muito conveniente ao usar uma grande quantidade de dados e só deseja quebrar a condição quando a condição for atendida. Imagine se não houver pontos de interrupção condicionais, precisamos clicar no depurador n vezes?
(Compartilhamento de vídeo de aprendizagem: desenvolvimento de front-end da web, vídeo básico de programação)
Acima estão os detalhes de 11 habilidades de depuração do Chrome que podem melhorar a eficiência. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!