DEV Community

loading...
WoMakersCode

DevTools Tips #1 Preserve Log - Como reter o log de suas requisições ao mudar de página

maribeiromendes profile image Mariana Ribeiro ・2 min read

Você como pessoa desenvolvedora em algum momento certamente já precisou de uma mãozinha das ferramentas de desenvolvedor do seu navegador para analisar algum problema fosse ele de front-end ou back-end.

Este é o primeiro artigo de uma série que trará para você, pessoa desenvolvedora, dicas resumidas de como tirar melhor proveito desse conjunto de ferramentas disponíveis a apenas uma tecla (F12) de distância.

Para os exemplos deste tutorial eu usei o Microsoft Edge Dev, que tem como base o Chromium, então provavelmente você encontrará algo similar no Chrome, porém outros navegadores como o Firefox tem opções parecidas ou mesmo iguais.

Você já ouviu falar da opção “Preserve Log/Preservar Log” na aba Network/Rede?

Sabe quando você carrega uma página e precisa analisar uma sequência de requisições que estão sendo executadas em um processo, porém durante o procedimento você precisa realizar alguma ação que vai te redirecionar para outra página e então você perde todo o log daquela primeira página? A opção “Preserve Log” evita que o seu log de requisições seja perdido ao navegar entre páginas.

Onde e como utilizar essa opção?

Abra as ferramentas de desenvolvedor do seu navegador, também conhecido como F12 ou dev tools, clicando na tecla F12. Outra opção seria acessando os três pontinhos perto de sua barra de endereços do navegador, então vá em "Mais ferramentas" e então selecione a opção "Ferramentas de desenvolvedor", ou ainda apenas utilizando o atalho Ctrl + Shift + i.

Vá na aba Rede/Network e selecione “Preserve Log”:

Preserve Log selecionado

Sem “Preserve Log” marcado:

Exemplo de carregamento de página sem Preserve Log selecionado

Com “Preserve Log” marcado:

Exemplo de carregamento de página sem Preserve Log selecionado

E é isso, espero-os na próxima dica!

Discussion (0)

pic
Editor guide