Debugando no Chrome com Blackbox
Vou iniciar falando de um recurso que utilizei e que originou minha busca e descoberta sobre o Blacking no DevTools do Chrome.
O Event Listener Breakpoints é um dos recursos do DevTools no Chrome que nos permite debugar nosso código a partir da inserção de Pontos de Interrupções(Breakpoints) para eventos que são escutados pelo navegador.
Entendendo a dor que o Blackbox ajuda a resolver
Algumas vezes, precisamos descobrir como um evento está sendo disparado e esse recurso permite irmos navegando pelo código até achar a fonte do disparo.
Mas, esse é um processo custoso, pois ele vai navegando por cada tipo de evento que você escolheu interromper, como por exemplo o click do mouse. Ele irá parar em cada chamada de click que conter em seu projeto, inclusive nos que estão contidos dentro do arquivo de jQuery por exemplo.
Depois dessa breve explicação de como funciona o Event Listener Breakpoints, queria te fazer duas perguntas, caro leitor:
Você já usou ou usa o Event Listener Breakpoints para debugar seu código?
Já? É um recurso muito interessante, apesar de ser pouco usual, é sempre bom conhecer quais são suas ferramentas.
Não? Tranquilo. Mas dê uma olhada no que ele pode te oferecer. Como disse acima, é sempre bom conhecer suas ferramentas para escolher a que melhor atender.
E por acaso você já sofreu para encontrar o evento em específico por conta da quantidade de chamadas em referência a ele dentro do seu projeto?
Já? É complicado né, mas relaxa pois abaixo vou te mostrar um recurso que você irá se perguntar como viveu esse tempo todo sem conhecê-lo.
Não? Então…
Brincadeiras à parte, vamos agora ao que interessa: com esse artigo você verá uma nova forma de debugar seu código e sem a frustrante experiência descrita no início do artigo.
O Chrome DevTools possui um um recurso chamado Blackboxing, basicamente com ele você consegue adicionar quais patterns (padrões) que você quer ignorar durante o debug do seu código.
Pode-se adicionar diretamente o nome do arquivo, como por exemplo:
“jquery-1.8.3.min.js”Ou também utilizar uma pattern com base em RegEx! Se quiser entender como funciona exatamente vou te recomendar ler este artigo excelente sobre Expressão Regular.
Na forma exemplificada abaixo, irá abranger todos os arquivos javascript minificados:
“\.min\.js$”Desta forma, serão adicionadas essas regras à lista do Blackboxing e elas serão usadas dependendo do tipo de função que você escolheu.
Isso mesmo, o Blackboxing não serve apenas para ignorar um script quando você for debugar seu código, com esse recurso você também consegue desabilitar completamente o script para testar algum comportamento ou situação em específico na sua aplicação.
Hands-on: como começar a usar o Blackbox
Para começar a usar o Blackbox, vamos abrir nosso querido DevTools(F12) e no canto superior direito iremos clicar nos três pontos para abrir as configurações e customizações do DevTools.
Basta seguir o guia abaixo, clicando na sessão Blackboxing e em seguida ative a opção Blackbox content scripts. Agora, basta adicionar as patterns que desejar incluir na regra, podendo escolher se deseja ignorar ou bloquear o script.
O Blackboxing também ajuda quando você está debugando e não gostaria de cair em eventos genéricos como no jquery.min.js. Segue uma demonstração rápida de como incluir esse script no Blackboxing de forma prática, evitando que o seu ponteiro passe por esses scripts durante a sequência da Call Stack:
Como pôde observar, tínhamos diversos eventos na Call Stack e após selecionarmos quais scripts queríamos colocar na regra do Blackboxing, essa fila fica mais limpa, de fácil navegação e agilizando o seu processo de debugging.
Conclusão
O intuito do Blackbox é nitidamente aumentar sua produtividade ao debugar um código, agilizando e sendo mais preciso na identificação do problema que esteja tentando corrigir. Ele é um recurso simples, porém é um recurso de primeira classe ao que se refere a debugar com eficiência.
Espero que tenham gostado! Qualquer dúvida, deixe um comentário abaixo.
