Prefácio: o código de depuração é indispensável para qualquer programador. Seja você um mestre ou um novato, os programas de depuração são uma tarefa indispensável. De um modo geral, os programas de depuração são realizados após a redação do código ou ao modificar os bugs durante o teste. Muitas vezes, é melhor refletir o nível e a precisão do programador de analisar problemas durante o código de depuração. Muitos iniciantes sempre desconhecem o problema ao procurar a causa do erro, gastando muito tempo, mas incapazes de resolver alguns bugs que acabam sendo bastante simples. O domínio de várias habilidades de depuração definitivamente alcançará o dobro do resultado com metade do esforço no trabalho. Por exemplo, localize rapidamente problemas, reduza a probabilidade de falha, ajudar a analisar erros lógicos etc. No hoje, quando o desenvolvimento do front-end da Internet está se tornando cada vez mais importante, é particularmente importante reduzir os custos de desenvolvimento, melhorar a eficiência do trabalho e dominar as habilidades de desenvolvimento e depuração frontal no desenvolvimento de front-end.
Este artigo explicará várias técnicas de depuração do JS front-end, uma a uma. Talvez você os tenha dominado, então vamos revisá -los juntos. Talvez haja métodos que você nunca viu antes. Você também pode aprendê -los juntos. Talvez você não saiba como depurar. Aproveite esta oportunidade para preencher a lacuna.
1. Alert, mestre de depuração de arout
Foi quando a Internet estava apenas começando, e o front-end da página da web era principalmente sobre exibição de conteúdo, e os scripts do navegador só poderiam fornecer funções auxiliares muito simples para a página. Naquela época, as páginas da Web eram executadas principalmente em navegadores dominados pelo IE6, e a função de depuração do JS ainda era muito fraca, para que eles só pudessem ser depurados através do método de alerta embutido no objeto da janela. Naquela época, deveria ter parecido com isso:
Deve -se notar que o efeito visto aqui não é o efeito visto no navegador do IE naquela época, mas o efeito na versão superior do IE. Além disso, parecia não haver esse console avançado naquela época, e o uso de alerta também estava no código JS da página real. Embora o método de alerta de depuração seja muito primitivo, ele tinha seu valor indelével naquele momento e ainda hoje tem seu lugar para ser usado.
2. A nova geração de depuração do console do rei
Como o JS pode fazer mais e mais coisas no front-end da Web, a responsabilidade está ficando cada vez maior, e o status está ficando cada vez mais importante. O método tradicional de depuração de alerta gradualmente falhou em atender aos vários cenários do desenvolvimento do front-end. Além disso, as informações de depuração surgiram pelo método de depuração de alerta não são realmente bonitas e bloquearão algum conteúdo da página, o que realmente não é amigável.
Por outro lado, as informações de depuração do alerta devem ser adicionadas à lógica do programa, como "Alert (xxxxx)", para funcionar normalmente, e alerta prejudicará a renderização contínua da página. Isso significa que, após a conclusão da depuração do desenvolvedor, ele deve limpar manualmente esses códigos de depuração, o que é realmente problemático.
Portanto, a nova geração de navegadores Firefox, Chrome e IE lançaram sucessivamente os consoles de depuração do JS, apoiando o uso de um formulário semelhante ao "console.log (xxxx)" para imprimir informações de depuração no console sem afetar diretamente a exibição da página. Veja o IE como exemplo, parece assim:
Ok, adeus à feia caixa pop-up de alerta. A estrela em ascensão, liderada pelo Chrome, expandiu recursos mais ricos para o console:
Você acha que isso é satisfatório? A imaginação da equipe de desenvolvimento do Chrome é realmente admirável:
OK, eu disse um pouco mais fora do tópico. Em suma, o surgimento de objetos de console interno no console e no navegador trouxe grande conveniência ao desenvolvimento e depuração do front-end.
Algumas pessoas podem perguntar: esse código de depuração precisa ser limpo após a conclusão da depuração?
Em relação a esse problema, se você tiver uma verificação avançada de existência antes de usar o objeto do console, isso não causará danos à lógica de negócios sem exclusão. Obviamente, para garantir que o código limpo, após a conclusão da depuração, esses códigos de depuração que não estão relacionados à lógica de negócios devem ser excluídos o máximo possível.
3. Depuração do ponto de interrupção JS
O Breakpoint, uma das funções do depurador, permite que interrompem o programa interrompido quando necessário, facilitando assim sua análise. Você também pode definir pontos de interrupção em uma depuração. Da próxima vez, você só precisa permitir que o programa seja executado automaticamente para a posição de ponto de interrupção do conjunto e pode interrompê -lo na última posição de ponto de interrupção do conjunto, o que facilita bastante a operação e economiza tempo. -Enciclopédia-baidu
A depuração do JS Breakpoint significa adicionar pontos de interrupção ao código JS em ferramentas de desenvolvedor de navegador, permitindo que a execução do JS pare em um local específico, o que facilita os desenvolvedores a analisar e o processamento lógico dos segmentos de código lá. Para observar o efeito da depuração do ponto de interrupção, preparamos um pedaço do código JS com antecedência:
O código é muito simples, é definir uma função, passar em dois números, adicionar um número inteiro aleatório bagunçado e retornar a soma dos dois números. Tomando as ferramentas de desenvolvedor do Chrome como exemplo, vamos dar uma olhada nos métodos básicos da depuração do JS Breakpoint.
3.1. Fontes Ponto de interrupção
Primeiro de tudo, no código de teste, podemos ver que o código deve estar em execução normalmente através dos resultados da saída do console na figura acima, mas por que deveria ser? Como um número aleatório é adicionado à função, o resultado final está realmente correto? Este é um palpite sem sentido, mas suponha que eu vou verificar agora: os dois números foram aprovados na função, o número aleatório adicionado e a soma final. Então, como operar?
Método 1, o mais comum mencionado acima, seja usando alerta ou console, podemos verificá -lo desta maneira:
A partir da figura acima, adicionamos três linhas de código do console ao código para imprimir as variáveis de dados com as quais nos preocupamos. No final, podemos verificar claramente se todo o processo de cálculo é normal e, em seguida, atende aos requisitos de verificação definidos por nossa pergunta.
O método 2 e o método 1 têm desvantagens óbvias no processo de verificação, que é que muito código redundante é adicionado. Em seguida, vamos dar uma olhada se usar pontos de interrupção para verificação é mais conveniente. Primeiro, veja como adicionar pontos de interrupção e que efeito é após o ponto de interrupção:
Conforme mostrado na figura, o processo de adição de pontos de interrupção a uma peça de código é "F12 (Ctrl + Shift + I) Abra ferramentas de desenvolvimento" - "Menu de fontes de clique" - "Encontre o arquivo correspondente na árvore esquerda" - "Clique na coluna do número da linha" para concluir a adição/exclusão dos pontos de interrupção na linha atual. Quando o ponto de interrupção for adicionado, atualize a execução da página JS para na posição do ponto de interrupção. Na interface de fontes, você verá todas as variáveis e valores no escopo atual. Basta verificar cada valor para concluir nossos requisitos de verificação.
O problema está aqui. Se você tiver cuidado, descobrirá que, quando meu código atingir um ponto de interrupção, os valores das variáveis A e B exibidos foram adicionados. Não podemos ver os 10 e 20 iniciais passados ao chamar a função da soma. Então, o que devo fazer? Isso exige que você volte e aprenda algum conhecimento básico da depuração do ponto de interrupção. Depois de abrir o painel de fontes, realmente veremos o seguinte conteúdo na interface. Seguimos a faixa do mouse para ver o que isso significa:
Da esquerda para a direita, as funções representadas por cada ícone são:
Pausa/retomar a execução do script: Pausar/retomar a execução do script (a execução do programa para no próximo ponto de interrupção).
Passe a próxima chamada de função: execute a chamada de função para a próxima etapa (pule para a próxima linha).
Entre na próxima chamada de função: digite a função atual.
Saia da função atual: interrompa a função de execução atual.
Pontos de interrupção desativados/ativos: desligue/em todos os pontos de interrupção (não cancelados).
Pausa sobre exceções: configuração automática de ponto de interrupção para exceções.
Nesse ponto, as teclas de função para depuração do ponto de interrupção foram quase introduzidas. Em seguida, podemos olhar para o nosso código de programa linha por linha para ver as alterações em cada variável após a execução de cada linha, conforme mostrado na figura abaixo:
Como mencionado acima, podemos ver todo o processo de variáveis A e B do valor inicial, adicionar um valor aleatório no meio e, finalmente, calcular a soma e a saída do resultado final. Não há problema em concluir os requisitos de verificação da configuração de perguntas.
Para as teclas de função restantes, alteramos ligeiramente nosso código de teste e usamos um diagrama de GIF para demonstrar seu uso:
Uma coisa a observar aqui é que a função de imprimir valores variáveis diretamente na área de código é um novo recurso adicionado na versão mais recente do Chrome. Se você ainda estiver usando uma versão mais antiga do Chrome, talvez não consiga visualizar informações variáveis diretamente em pontos de interrupção. Neste momento, você pode mover o mouse para o nome e pausa da variável por um curto período de tempo, e o valor variável aparecerá. Você também pode selecionar o nome da variável com o mouse e clique com o botão direito do mouse "Adicionar ao relógio" para visualizá-lo no painel de relógios. Este método também se aplica a expressões. Além disso, você também pode mudar para o painel do console nos pontos de interrupção, inserir o nome da variável diretamente no console e inserir as informações da variável. Esta parte é relativamente simples, considerando a duração do artigo e não fazendo fotos e demonstrações.
3.2. Ponto de interrupção do depurador
O chamado ponto de interrupção do depurador é realmente nomeado por mim, e eu não sei como dizer termos profissionais. Especificamente, adicionando um "depurador"; Declaração para o código, ele quebrará automaticamente pontos quando o código executar a instrução. A próxima operação é quase exatamente a mesma que adicionar depuração do ponto de interrupção no painel de fontes. A única diferença é que a declaração precisa ser excluída após a depuração.
Como a mesma maneira de definir pontos de interrupção é diferente, a função é a mesma que adicionar pontos de interrupção ao painel de fontes, por que esse método ainda existe? Penso que o motivo deve ser o seguinte: ocasionalmente encontramos o carregamento assíncrono de fragmentos HTML (incluindo código JS incorporado) no desenvolvimento, e essa parte do código JS não pode ser encontrada nas espécies de árvores de fontes; portanto, não podemos adicionar diretamente pontos de interrupção na ferramenta de desenvolvimento. Então, se queremos adicionar pontos de interrupção ao script de assíncrono, "Debugger"; vai funcionar neste momento. Vamos ver diretamente seu efeito através do diagrama GIF:
4. Dom Breakpoint Debugging
Dom Breakpoint, como o nome sugere, é adicionar pontos de interrupção ao elemento DOM para alcançar o objetivo da depuração. O efeito do uso de pontos de interrupção no uso real é implementado na lógica JS. Vamos dar uma olhada nos efeitos específicos de cada ponto de interrupção do DOM, por sua vez.
4.1. Quebre as modificações da subárvore quando os nós filhos dentro da mudança do nó (quebra nas modificações da subárvore)
Hoje, quando o desenvolvimento do front-end está se tornando cada vez mais complexo, o código JS front-end está se tornando cada vez mais complexo, e uma página da web aparentemente simples é geralmente acompanhada de grandes segmentos do código JS, envolvendo muitas operações de adicionar, excluir e modificar os nós DOM. É inevitável que seja difícil localizar os segmentos de código diretamente através do código JS, mas podemos localizar rapidamente os nós DOM relevantes através do painel Elements da ferramenta de desenvolvedor. Neste momento, é particularmente importante localizar scripts nos pontos de interrupção do DOM. Vamos dar uma olhada na demonstração do GIF:
A figura acima demonstra os efeitos da adição, exclusão e troca de operações de pedidos, desencadeando pontos de interrupção para os nós filhos da UL (LI). Mas deve -se notar que os atributos e o conteúdo da modificação dos nós filhos não desencadearão pontos de interrupção.
4.2. Break On Atributes Modifications
Por outro lado, à medida que a lógica de negócios do processamento front-end se torna cada vez mais complexa, a dependência de armazenamento de alguns dados está se tornando mais e mais forte. O armazenamento de dados temporários nas propriedades (personalizadas) do nó DOM é um método preferido para desenvolvedores em muitos casos. Especialmente depois que o padrão HTML5 aprimora o suporte de atributos personalizado (por exemplo: conjunto de dados, dados-*, etc.), mais e mais configurações de atributo são aplicadas, portanto, as ferramentas de desenvolvedor do Chrome também fornecem suporte ao ponto de interrupção de alterações de atributo, e os efeitos são aproximadamente da seguinte maneira:
Esse método também precisa observar que qualquer operação nas propriedades do nó infantil não acionará o ponto de interrupção do próprio nó.
4.3. Quebrar na remoção do nó
Essa configuração de ponto de interrupção DOM é muito simples e o método de acionamento é muito claro - quando o nó é excluído. Normalmente, o caso deve ser ao executar a instrução "parentnode.removechild (ChildNode)". Este método não é muito usado.
O que introduzimos anteriormente é basicamente os métodos de depuração que costumamos usar no desenvolvimento diário. Eles podem lidar com quase todos os problemas em nosso desenvolvimento diário quando usados corretamente. No entanto, as ferramentas do desenvolvedor também levam em consideração mais situações e fornecem mais maneiras de ponto de interrupção, como mostrado na figura:
5. Pontos de interrupção xhr
O desenvolvimento do front-end passou por mudanças de agitação na Terra nos últimos anos, desde sua reputação desconhecida até sua prosperidade atual, o Ajax impulsiona os aplicativos ricos da Web e os aplicativos móveis de página única da WebApp estão crescendo. Tudo isso é inseparável a partir do objeto XMLHTTPREQUEST, e "XHR Breakpoints" é um recurso de depuração do ponto de interrupção projetado para fins assíncronos.
Podemos adicionar uma condição do ponto de interrupção ao ponto de interrupção assíncrono através do sinal "+" à direita de "Xhr Breakpoints". Quando o URL quando a solicitação assíncrona for acionada, a lógica JS gera automaticamente um ponto de interrupção. A posição do ponto de interrupção não é demonstrada na animação da demonstração, porque a demonstração usa o método Ajax encapsulado por jQuery. O código foi comprimido e não há efeito. De fato, o ponto de interrupção XHR é gerado pela instrução "xhr.send ()".
O poder dos pontos de interrupção XHR é que podemos personalizar as regras do ponto de interrupção, o que significa que podemos definir pontos de interrupção para um determinado lote, um certo e até todas as solicitações assíncronas, que são muito poderosas. No entanto, parece que essa função não é usada muito no desenvolvimento diário, pelo menos eu não a uso muito. Pense bem, existem aproximadamente duas razões: primeiro, esse tipo de requisitos de depuração do ponto de interrupção não está envolvido muito nos negócios diários; Segundo, a maior parte do desenvolvimento do front-end nesta fase é baseada na estrutura do JS, e o jQuery mais básico também encapsulou o Ajax. Poucas pessoas encapsulam os próprios métodos do Ajax. Para reduzir o tamanho do código, o projeto geralmente escolhe as bases de código comprimidas, tornando o rastreamento do ponto de interrupção do XHR relativamente menos fácil.
6. pontos de interrupção do ouvinte de eventos
O ponto de interrupção do ouvinte de eventos, ou seja, a configuração do ponto de interrupção é executado de acordo com o nome do evento. Quando o evento é acionado, o ponto de interrupção é para o local em que o evento está vinculado. Os pontos de interrupção do ouvinte de eventos listam todos os eventos de página e script, incluindo: mouse, teclado, animação, timer, XHR, etc. Reduz bastante a dificuldade de depurar a lógica de negócios nos eventos.
O exemplo de demonstração demonstra o efeito do ponto de interrupção quando o evento de clique é disparado e quando o setTimeout é definido. O exemplo mostra que, após a seleção do ponto de interrupção do clique, o ponto de interrupção é acionado quando os dois botões são clicados e, quando o Settimeout é definido, o ponto de interrupção do "timer definido" é acionado.
A depuração é uma parte muito importante do desenvolvimento do projeto. Ele não pode apenas nos ajudar a localizar rapidamente problemas, mas também economizar tempo de desenvolvimento nos EUA. O proficiente em vários métodos de depuração definitivamente trará muitos benefícios ao seu desenvolvimento de carreira. No entanto, com tantos métodos de depuração, como escolher um adequado para o seu cenário de aplicativo atual requer experiência e tentativas contínuas de acumular.
Tendo escrito isso, pode -se basicamente dizer que ele saiu em pleno andamento. Espero que possa atrair sua atenção e espero que você se sinta um pouco tocado e se sinta um pouco familiar. O mais importante é que espero que você possa melhorar suas habilidades rapidamente e se tornar uma pessoa qualificada!