Desenvolvimento

Troubleshooting Tips: Google Chrome + Resource Override

Olá Pessoal!

A dica de hoje vai pra aqueles que precisam fazer qualquer troubleshooting que exija o replace de arquivos ou injeção de código client-side diretamente no browser em tempo de execução! Mas em que cenários isso seria útil?

Apenas um teste em produção…

Vai me dizer que voce nunca fez aquele advanced troubleshooting em um problema irreproduzível em outro ambiente, mas por questões de governança, compliance, segurança (e até aquela boa pitada de bom senso), não deveria sair metendo a mão em prod?

#quemNunca? 😉

Mas do ponto de vista client-side, podemos matar esse problemas facilmente!

 

E um novo item para a toolbox 🙂

Gostaria de apresentá-los a Resource Override – excelente extensão para o Google Chrome disponível no link abaixo:

https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii/related 

Esta extension me ajudou recentemente num troubleshooting bem chato, desses production edition only, no qual deveria dar um override em alguns arquivos JS em produção e conferir algumas chamadas e callbacks – o que seria bem mais complicado se pensarmos na duplicação de arquivos e necessidade de alteração de paths apenas para teste (not good), ou a necessidade de tratarmos arquivos atualizados em cache/ CDNs e ainda impactando no controle de versões (even worse). Bom, acho que já sabemos que um outro método é mais do que conveniente nesta situação 😀

Apenas para ilustrar o caso, vamos brincar com um site público de notícias:

Vamos pegar um dos primeiros scripts de exemplo e substituir seu conteúdo:

Fazemos isso através da extension “Resource Override”:

E agora é só definir o conteúdo do nosso arquivo (ou até mesmo apontar para um novo arquivo, em qualquer outro lugar):

Save & Close.

Aí sim!

O bacana dessa ferramenta é que ela permite a substituição de arquivos, ou parte deles em tempo de execução diretamente no client, e isso garante uma flexibilidade muito grande para os sagrados troubleshootings de cada dia 🙂

Espero que tenha ajudado e até o próximo post!

 

[Update 14/02]: o Google Chrome deverá lançar no próximo release uma feature OOB que poderá nos ajudar nesta tarefa – o Local Overrides 🙂

Maiores detalhes – https://developers.google.com/web/updates/2018/01/devtools#overrides

 

Este post reflete apenas a opinião do autor sobre o assunto, e não fornece garantias ou responsabilidade sobre qualquer problema decorrente de sua utilização.

Deixe uma resposta