1. O que está a depuração do ponto de interrupção? É difícil?
A depuração do ponto de interrupção não é realmente uma coisa complicada. Um entendimento simples de nenhuma chamada de saída é abrir o navegador, abrir fontes, encontrar o arquivo JS e clicar no número da linha. Parece muito simples de operar, mas o que muitas pessoas estão realmente confusas é onde quebrar o ponto? (Vamos primeiro olhar para uma captura de tela do ponto de interrupção, pegando o ponto de interrupção do navegador Chrome como exemplo)
Lembra dos passos?
Abra a página com um navegador Chrome → Pressione F12 para abrir as ferramentas do desenvolvedor → Abrir fontes → Abra o arquivo de código JS que você deseja depurar → Clique no número da linha, ok! Parabéns ao seu ponto de interrupção virgem por bater, haha ~~
2. Como acertar pontos de interrupção adequadamente?
A operação de pontos de interrupção é muito simples. O problema principal é: como acertar pontos de interrupção para solucionar o problema com o código? Deixe -me continuar a dar um exemplo para entender. Sem mais delongas, a imagem acima:
Suponha que agora estamos implementando uma função que carregue mais, como mostrado na figura acima, mas há um problema em carregar mais funções. Depois de clicar, os dados não são carregados. O que devemos pensar neste momento? (Escreva a resposta em outra linha e você pode ver qual é a sua primeira reação)
A primeira coisa que me veio à mente foi se meu clique foi bem -sucedido? O método no evento de cliques está em execução? Ok, se você quiser saber a resposta para esta pergunta, vamos tentar acertar um ponto de interrupção imediatamente. Onde está o ponto de interrupção? Pense nisso primeiro.
Próxima foto:
Você pensou nisso? É isso mesmo, como queremos saber se o clique é bem -sucedido, é claro que estamos adicionando um ponto de interrupção no evento de clique no código. Lembre -se de não adicioná -lo na linha 226, porque a função no método de clique é executada, não o seletor da linha 226. O ponto de interrupção foi atingido agora, então o que fazer? Pense nisso você mesmo ~
Continue para a imagem acima:
Então é claro que voltamos e clicamos no botão Load More, por quê? Testa. . . Se você perguntar isso, permita -me usar esse emoticon, sem clicar no botão Carregar mais, como acionar o evento de clique? Como executar as funções no evento de clique sem acionar o evento de clique? Rugindo. . Mas acredito que todos não farão perguntas tão baixas ~ não vou falar bobagem ~
Continue no tópico, a imagem acima é a situação depois de clicar nos botões de carga mais. Podemos ver que a página à esquerda é coberta por uma camada translúcida. Há também uma sequência de inglês e dois botões acima da página. As 227 linhas do código à direita foram adicionadas com uma cor de fundo. Essa situação ocorre, não importa o que os botões significam e o que suas funções fazem. Que informações você obteve nesta foto? Continue pensando nisso ~
Se ocorrer a situação acima, isso significa que a função no evento de cliques foi chamada, o que explica ainda que o evento de cliques entra em vigor. Então, o primeiro "suspeito criminal" que causamos a esse problema é descartado.
Para adicionar:
E se a situação acima não ocorrer? Isso significa que o evento de clique não entrou em vigor? O que fez com que o evento de clique não entrasse em vigor? Todo mundo pensa sobre isso sozinho ~
Existem muitas razões pelas quais o evento de clique não entra em vigor, como erros de vários seleção, erros de sintaxe, elementos selecionados são gerados posteriormente, etc. Como resolvê-lo?
O seletor está errado, você pode continuar vendo o conteúdo da parte do console mais tarde, acho que todo mundo sabe como lidar com isso.
Erros de sintaxe, verifique com cuidado. Você pode comparar gramáticas desconhecidas no Baidu.
O elemento selecionado é gerado posteriormente. A maneira mais fácil de lidar com isso é usar o método .on (). Essa coisa é processada com a delegação de eventos. Você pode usar o Baidu para obter detalhes.
Então, onde a identidade do "suspeito criminal" será trancada a seguir?
Voltamos nossa atenção para o evento dentro e o evento de clique é acionado, para que o próximo problema seja o problema da função dentro dele. Se você quiser perguntar por quê? Por favor, me dê um pedaço de tofu. . .
Por exemplo, vou lhe dar uma caneta e pedir que você escreva. Então você escreve uma palavra no artigo e descobre que a palavra não está fora. Por que? Você disse que eu escrevi e ainda havia arranhões no jornal. É possível que a caneta não tenha tinta ou a ponta esteja quebrada? Este exemplo é mais um princípio de carregamento de cliques. A ação de escrita é a operação de cliques e a função interna é a tinta ou a ponta da caneta. Você entende ~
Em seguida, analisamos o conteúdo do evento de clique, que contém três frases. A primeira frase é que a variável que eu cresce por si só, a segunda frase é adicionar uma tag I ao botão e a terceira frase é chamar o método de solicitar dados.
Com o papel dessas três frases, podemos colocar uma parte maior da suspeita na terceira frase e uma pequena parte na primeira e na segunda frases. Algumas pessoas podem se perguntar: como a segunda frase pode ser suspeita? Sua função é apenas adicionar um rótulo, que não afeta os dados. De fato, essa frase não afeta os dados, mas, para considerações rigorosas, ainda pode cometer erros, por exemplo, e se não tiver um semicolon? Ou há um símbolo dentro da frase errada? Muitas vezes, é esse tipo de pequeno problema que desperdiça muito do nosso tempo.
OK, para travar ainda mais o "suspeito criminal", apresentarei a você uma ferramenta, que também é um dos dois ícones que aparecem na figura acima, veja a figura abaixo:
A função desse pequeno ícone é chamada de "execução por frase" ou "execução passo a passo". Este é um nome que eu pessoalmente entendo, o que significa que toda vez que clico nele, a declaração JS executará uma frase mais tarde e também possui uma chave de atalho, F10. A figura a seguir mostra o efeito após o clique:
Eu cliquei neste botão duas vezes (ou usei a tecla de atalho F10) e o código JS foi executado da linha 227 à linha 229, então chamei-o de "declaração por passo" ou "passo a passo". Esta função é muito prática e será usada para a maioria das depuração.
É tarde demais, continuarei escrevendo amanhã, o bom show ainda está chegando ~
―S
Ok, continue escrevendo!
A introdução acima mostra que cliquei no botão "Execução de frase por frase" duas vezes e o código foi executado da linha 227 para a linha 229. O que você acha que isso significa? Isso significa que, do ponto de vista gramatical, as duas primeiras frases não são problemáticas, então também significa que as duas primeiras frases eliminam suspeitas? Eu não vejo isso.
Como todos sabemos, carregar mais é uma função da próxima página, e a mais central é o valor do número da página passada para o plano de fundo. Sempre que clico no botão Carregar mais uma vez, o valor do número da página deve ser aumentado em 1. Portanto, se os dados na próxima página não serão lançados, é possível que haja um problema com o valor do número da página, ou seja, [i variável] (a seguir é o nome unificado I)? Então, como solucionar se há algum problema com o número da página? Todo mundo pensa primeiro.
Aqui estão duas maneiras de visualizar o valor de saída real do número da página I], a figura acima:
O primeiro tipo:
As etapas de operação são as seguintes:
1. Ainda pressione um ponto de interrupção na linha 227 → 2. Clique no botão de carregamento mais → 3. Clique no botão "Execute a frase por frase" uma vez e o código JS será executado na linha 228 → 4. Use o mouse para selecionar I ++ (o que significa que você não entende? Veja o resultado na figura acima.
O segundo tipo:
Esse método é realmente semelhante ao primeiro, exceto que o valor de I é emitido no console. Você só precisa seguir o primeiro método a ser executado na etapa 3 → 4. Abra o console do mesmo nível que as fontes → 5. Digite i → 6. Pressione a tecla Enter Enter.
No segundo método acima, o console é mencionado. Podemos chamá -lo de console ou qualquer outra coisa. Isso não é importante. O console tem uma função muito poderosa. Durante o processo de depuração, geralmente precisamos saber quais são os valores de certas variáveis em saída ou se usamos o seletor [$ ". Div") para selecionar os elementos que queremos, etc., podem ser impressos no console. Obviamente, também é possível usar o primeiro método diretamente.
Deixe -me demonstrar a você os elementos que queremos selecionar no console. Imagem acima ~
Digite $ (this) no console para obter o elemento selecionado. Sim, é o objeto que clicamos - carregue mais elementos do botão.
Aqui vou lhe contar minha compreensão do console do console: essa coisa é um analisador JS, que é usado pelo próprio navegador para analisar o cara que administra JS. No entanto, o navegador permite que os desenvolvedores dos EUA controlem a operação e a saída de JS durante o processo de depuração através do console. Através dos dois métodos acima, você pode pensar que é muito fácil de usar, mas eu gostaria de lembrá -lo, ou é uma confusão que alguns iniciantes têm maior probabilidade de encontrar.
Confuso 1: Quando não houver ponto de interrupção, digite i no console e o console relata um erro.
Este deve ser um problema comum para iniciantes. Por que não posso emitir diretamente o valor das variáveis no console sem quebrar o ponto? Pessoalmente, entendo que sou apenas uma variável local neste momento. Se nenhum ponto de interrupção estiver definido, o navegador analisará todos os JS. O console não pode acessar variáveis locais, mas só pode acessar variáveis globais. Portanto, o console relatará um erro que eu indefiniu, mas quando o JS atingir um ponto de interrupção, o console o analisa a função em que a variável local I está localizada e posso ser acessada neste momento.
Confusão 2: Por que posso imprimir algo diretamente em $ (". Xxx") no console?
É muito simples. O console em si é um analisador JS e $ (". xxx") é uma instrução JS, portanto, naturalmente, o console pode analisar essa instrução e gerar o resultado.
Depois de introduzir o uso do botão e console "sentença por frase", finalmente apresentaremos um botão, a imagem acima:
Eu chamo este botão de botão de "execução do processo", que é diferente do botão "Execução de instrução". O botão "Execução do processo" é frequentemente usado quando um método chama vários arquivos JS. O código JS envolvido é relativamente longo, então esse botão será usado.
Acima:
Suponha que, na imagem acima, eu só fiz um ponto de interrupção na linha 227 e depois clicando no botão "Executar declaração por frase" na linha 229, e se eu clicar no botão "Executar a declaração por frase" novamente? Ele entrará no JS na figura a seguir:
Estes são o conteúdo do arquivo da biblioteca Zepto. Não há nada de bom para assistir. É muito complicado de correr. Nem sempre podemos usar o botão "Execução de frase por frase", então você descobrirá que está pressionando a maior parte do dia e ainda circulando no arquivo da biblioteca. . . O que fazer neste momento? Então é hora de o botão "Execução de processo por processo" para subir no palco.
Acima:
Além de definir um ponto de interrupção na linha 227, também bati em um ponto de interrupção na linha 237. Quando executamos na linha 229, clique diretamente no botão "Execução de processo por processo". Você descobrirá que o JS pulou diretamente o arquivo da biblioteca e correu para a linha 237. Você pode usá -lo para você experimentar.
Resumo final:
Este artigo apresenta principalmente as três ferramentas de botão "Fensen-por sentença por execução serial", botão de "execução processador por série", console de console e algumas idéias ao depurar bugs. Não vou repetir o uso da ferramenta. Apenas conheça o uso. Como usá -lo mais razoavelmente precisa ser resumido e melhorado através de muita prática ~
Na verdade, o que eu quero falar principalmente neste artigo é uma maneira de depurar bugs, mas porque os exemplos que escolhi envolvem muitas coisas. . . Eu tinha medo de que o conteúdo de tudo fosse muito longo e todo mundo não estivesse interessado em lê -lo, então eu simplesmente escolhi uma parte para explicar isso a você. Gostaria de saber se você ganhou alguma coisa. Não olhe para as três frases que escrevi muitas coisas na depuração. Se você realmente faz isso como eu no projeto real, provavelmente levará muito mais tempo para depurar um bug do que escrever um script. . . Em situações reais, devemos desenvolver a primeira vez que obtemos o problema, verifique o problema em nossas mentes e encontrar o ponto mais provável. Se não conseguirmos encontrar rapidamente o ponto mais importante, você poderá usar o método mais problemático, mas confiável, para usar o botão "Execução de frase por frase" para executar todo o JS relacionado ao problema um por um. Durante o processo de execução, também devemos esclarecer nossos pensamentos e prestar atenção ao valor correto de cada variável e aos elementos selecionados pelo seletor. De um modo geral, se você fizer isso uma vez, os bugs serão quase resolvidos.
Então, pessoalmente, acho que nossa idéia de depurar bugs deve ser a seguinte: primeiro, se o JS é executado com sucesso; Segundo, se JS tem problemas lógicos, problemas variáveis, problemas de parâmetros, etc.; Finalmente, se não houver problemas com o acima, verifique cuidadosamente vários símbolos. . .
Ok ~ isso é tudo sobre o ponto de interrupção ~ Se você não entende, poderá deixar uma mensagem abaixo ~ se tiver algum ponto de conhecimento que não entende ou estiver confuso sobre o front-end, também poderá deixar uma mensagem abaixo. Quando você tiver tempo, continuarei escrevendo alguns documentos em suas mensagens ~