Técnicas de depuração usadas no navegador

 (alan.norbauer.com)
5 pontos por GN⁺ 2023-11-12 | 1 comentários | Compartilhar no WhatsApp

Dicas para aproveitar o depurador do navegador

  • Pontos de interrupção condicionais avançados

    • Expandir a funcionalidade dos pontos de interrupção condicionais usando expressões com efeitos colaterais
    • Registrar logs no console sem interromper a execução por meio de logpoints/tracepoints
    • Usar console.count para contar o número de execuções
    • Os principais navegadores oferecem suporte a logpoints/tracepoints (em maio de 2020)

  • Uso da janela de observação

    • É possível usar console.log na janela de observação
    • Definir um ponto de interrupção em mudanças do DOM e adicionar uma expressão de observação para executar uma expressão no momento em que o DOM mudar

  • Rastreamento da pilha de chamadas

    • Rastrear a pilha de chamadas de funções para encontrar chamadas inconsistentes
    • Usar console.trace em um ponto de interrupção condicional para verificar a pilha de chamadas

  • Alteração do comportamento do programa

    • É possível alterar o comportamento do programa na hora, dentro do navegador
    • Sobrescrever parâmetros de função para ajustar o comportamento

  • Profiling simples de desempenho

    • Medir o tempo de execução do código usando a API de temporização do console
    • Medir tempo com console.time('label') e console.timeEnd('label')

  • Aproveitando a aridade de função

    • Ativar o ponto de interrupção apenas quando for chamado com um número específico de argumentos
    • Usar isso para encontrar incompatibilidades na quantidade de argumentos em chamadas de função

  • Aproveitando o tempo

    • Ativar o ponto de interrupção apenas depois que um certo tempo tiver passado após o carregamento da página
    • Ignorar o ponto de interrupção por um período específico e ativá-lo somente depois disso

  • Aproveitando CSS

    • Ativar o ponto de interrupção com base em valores calculados de CSS

  • Interromper apenas em chamadas pares

    • Ativar o ponto de interrupção apenas na execução de número par

  • Interromper por amostragem

    • Ativar o ponto de interrupção apenas para uma amostra aleatória das execuções

  • Não interromper em uma linha específica

    • Usar a opção "Never Pause Here" para evitar interrupção em uma linha específica

  • Atribuição automática de ID de instância

    • Atribuir automaticamente um ID único a cada instância de classe

  • Alternância programática

    • Alternar pontos de interrupção condicionais de forma programática usando um booleano global

  • Chamadas de classe com monitor()

    • Usar o comando monitor do Chrome para rastrear chamadas de métodos de classe

  • Chamadas de função e depuração

    • Chamar debugger no console e então invocar a função para depurá-la

  • Interromper a execução em mudanças de URL

    • Interromper a execução antes de uma mudança de URL em aplicações de página única

  • Depuração de leitura de propriedades

    • Ativar o ponto de interrupção sempre que uma propriedade de um objeto for lida

  • Uso de copy()

    • Usar a API de console copy() para copiar informações diretamente do navegador para a área de transferência

  • Depuração de HTML/CSS

    • Usar o console JS para diagnosticar problemas de HTML/CSS
    • Inspecionar o DOM com o JS desativado
    • Inspecionar elementos do DOM que aparecem condicionalmente
    • Registrar snapshots do DOM
    • Monitorar o elemento em foco
    • Encontrar elementos em negrito
    • Referenciar o elemento atualmente selecionado
    • Monitorar eventos

Opinião do GN⁺

O mais importante neste texto é que ele apresenta várias técnicas e dicas para que desenvolvedores usem o depurador do navegador de forma mais eficiente ao depurar código e resolver problemas. Essas informações são muito úteis para desenvolvedores de software e são especialmente interessantes porque podem economizar tempo ao rastrear bugs complexos ou resolver problemas de desempenho.

Leituras relacionadas

1 comentários

 
GN⁺ 2023-11-12
Comentários do Hacker News

  • Evolução das ferramentas de depuração integradas ao navegador

    • As ferramentas de depuração integradas ao navegador evoluíram muito nas últimas décadas.
    • Como alguém com carreira em JavaScript, agradece a todos que tornaram possível depurar código no navegador de forma intuitiva.
    • Ao trabalhar com backend ou outras linguagens, sente falta do ecossistema de ferramentas de depuração dos navegadores modernos.

  • Uso da instrução debugger

    • Usar a instrução debugger; é a única forma de vencer a pilha recursiva do depurador do Chrome.
    • Menciona um caso em que armadilhas de depuração foram usadas para impedir que visitantes do site interpretassem sua homepage ofuscada.

  • Dificuldades para depurar backend em NodeJS

    • Como programador de Python/Elixir, usa com frequência pdb.set_trace()/IEx.pry().
    • Herdou um backend complexo em NodeJS e teve dificuldades para trabalhar sem ferramentas de depuração adequadas.
    • Teve que voltar à depuração com console.log, o que pareceu algo primitivo.
    • Demonstra surpresa pela falta de um REPL de depuração adequado e pede ajuda.

  • Recomendação do Werkzeug

    • Recomenda usar o Werkzeug no desenvolvimento backend com Django.
    • Ele permite usar um shell “PDB” no navegador sempre que uma exceção ocorre.

  • Como acessar variáveis locais de uma IIFE

    • Pergunta como acessar variáveis locais de uma expressão de função executada imediatamente (IIFE).
    • Busca uma forma de fazer isso sem que o depurador precise interromper o código dentro do escopo da IIFE.

  • Método de depuração por meio de strings da UI

    • Começa registrando as requisições de rede no painel de rede.
    • Usa a busca na barra lateral esquerda para inserir a string de código/UI que quer encontrar.
    • Encontra o resultado em arquivos chunk de JS empacotados, abre em “Sources” e coloca uma instrução do depurador.

  • Depuração com breakpoint condicional

    • Pergunta sobre uma forma de transformar {configOption: true} em {get configOption() { debugger; return true; }}.

  • Recurso exclusivo do Chrome: 'Monitor Events for Element'

    • Menciona o recurso 'Monitor Events for Element' e o fato de ele ser exclusivo do Chrome.
    • Pergunta se existe alguma alternativa para o Firefox.

  • Ausência da API queryObjects

    • Menciona a API queryObjects, que retorna uma lista de todos os objetos criados por um construtor específico.
    • Por exemplo, queryObjects(Function) pode ser usado para obter uma lista de todas as funções no heap.

  • Dificuldade de uso de watch variables

    • Relata dificuldade para fazer watch variables funcionarem.
    • Supõe que só é possível observar variáveis globais, mas como isso não funcionou como esperado, acabou enchendo o log de valores.
    • Opina que o console deveria ter uma UI no estilo Data.gui para inspecionar e testar variáveis e valores de configuração, e fornece um link relacionado do CodePen.