Ferramentas de desenvolvimento do Chrome: como rastrear a rede para um link que abre uma nova guia?

236

Quero rastrear a atividade de rede que acontece quando clico em um link. O problema é que o link abre uma nova guia e, aparentemente, o Dev Tools funciona por guia para a qual estava aberto. "Preservar log na navegação" não ajuda.

Minha solução atual é mudar para o FireFox e o HttpFox, que não possui esse problema. Gostaria de saber como todos os desenvolvedores do Chrome gerenciam, isso parece bastante básico (é claro que procurei a resposta, não achei nada útil).

google-chrome google-chrome-devtools

— davka
fonte

Como essa pergunta recebe muita atenção, comecei a me perguntar se posso fornecer uma solução melhor. Criar todos os links para abrir na mesma guia seria suficiente?

— Konrad Dzwinel

@KonradDzwinel Esta foi uma tarefa única para mim e segui em frente, então não posso lhe contar. Se você tentar escrever uma resposta, ficarei feliz em aceitá-la.

— Davka

1

Se você quiser isso como um recurso, sinta-se à vontade para marcar

— phsource

220

Confira chrome://net-internals/#events(ou chrome://net-exportna versão mais recente do Chrome) para obter uma visão geral detalhada de todos os eventos de rede que ocorrem no seu navegador.

Outra solução possível, dependendo do seu problema específico, pode ser ativar o 'Preserve log' na guia 'Network':

DevTools> Rede> Preservar log

e force a abertura de todos os links na mesma guia executando o seguinte código no console:

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};

— Konrad Dzwinel
fonte

13

graças isso é legal, mas eu quero a lista como nas ferramentas de desenvolvimento (pedidos e respostas com todos os cabeçalhos), apenas para outra guia

— davka

Isso é muito interessante, principalmente se você adicionar o filtro type:URL_REQUEST, mas ele não parece conter as mesmas informações da guia Rede. Por exemplo, parece retirar dados de cookies para solicitações e respostas.

— Patrick M

3

document.querySelectorAll('a,form')também afetaria os formulários.

— JGB

1

Eu gostaria de poder votar isso duas vezes. Eu criei um script de conteúdo para o chrome que faz isso em uma tecla de atalho e literalmente salvou horas da minha vida.

— Polkovnikov.ph 4/08/16

1

O Chrome exibe "O visualizador de eventos net-internals e a funcionalidade relacionada foram removidos. Use chrome: // net-export para salvar netlogs e a catapulta externa netlog_viewer para visualizá-los." , mas chrome: // net-export funciona fantástico.

— Jordânia

109

A solicitação de recurso mencionada no comentário pelo phsource foi implementada.

Nas versões recentes (a partir do Chrome 50), você pode acessar o menu Configurações das Ferramentas do Desenvolvedor (abra Ferramentas do Desenvolvedor, use o menu de 3 pontos ou clique em F1) e marque a caixa que diz "Abrir automaticamente o DevTools for pop-ups".

13

Funciona bem, exceto que é um pouco complicado habilitar "Preservar logs" imediatamente quando a janela é aberta.

— Erwin Mayer

Você deve atualizar sua resposta, já que a versão estável do Chrome é atualmente 55

— Lulu

5

Suspiro, a nova janela, no entanto, não tem <Preserve Logs> ativado. O que há de errado com os engenheiros do Chrome?

— Pacerier 11/11

Use isso em combinação com stackoverflow.com/a/29029881/145400 (uma ótima resposta para "Ferramentas de desenvolvimento do Chrome é possível manter-se aberto mesmo após o fechamento da janela?")!

— Dr. Jan-Philip Gehrcke

use o menu de 3-pontos ou hit> página de preferências> DevTools> "DevTools Auto-abertas para popups"

— holly

27

No Chrome 61.0.3163.100, agora você tem a seguinte opção disponível. Para acessar, acesse as Configurações das Ferramentas de Desenvolvimento do Chrome. Está no fundo.

Configurações do Web Inspector

— Konrad Piascik
fonte

3

Infelizmente, isso não ativa "Preservar logs" na janela recém-aberta. Portanto, se você obtiver uma nova janela e um redirecionamento na referida janela, o log da rede será limpo e começará após o redirecionamento.

— janh

4

A configuração, para quem não deseja clicar no link para ver a imagem, é "Abrir automaticamente o DevTools for pop-ups", sob o título "DevTools". Outras configurações disponíveis: "Preserve Log", em "Network"; "Preservar log na navegação" em "Console".

— hlongmore

2

Isso está funcionando para mim (Chrome 76) e está ativando "Preserve Logs" ao iniciar as ferramentas de desenvolvimento das janelas pop-up. Isso pode ser ativado quando a configuração Preserve Log estiver ativada?

— Vince Bowdren 10/09/19

11

Adicione / atualize o link para target="_self"
Marque "preservar logs na navegação" na guia Rede.
Clique no link e registre sua solicitação

— Sebastien Lorber
fonte

10

Você pode fazer assim:

defina target = "any_window_name" no link desejado.
clique no link uma vez para abri-lo em uma nova guia.
Na guia aberta, abra as ferramentas do desenvolvedor.
volte à página de origem e clique nesse link novamente.

O resultado será carregado na janela já preparada com as ferramentas do desenvolvedor abertas.

Você pode ativar a opção "preserve log" nas ferramentas de desenvolvimento (veja na excelente resposta do Konrad Dzwinel) para capturar qualquer tráfego de redirecionamento nesse link.

Nota : a maioria das pessoas familiarizadas com o destino do link ∈ {_self, _blank, _parent, _top}. Mas, na verdade, qualquer nome pode ser dado, isso abrirá uma nova janela com esse nome e quaisquer cliques subsequentes em links, formulários ou janelas. A abertura com o mesmo valor-alvo será aberta na mesma janela. leitura adicional - mdn: window.open , mdn: <a> tag

— Michael L.
fonte

Muito obrigado por esta dica, eu nunca teria pensado nisso. Exatamente o que eu precisava. Funciona em várias janelas (pelo menos no Chrome), se alguém lendo isso quiser ver como se comportam duas páginas ao mesmo tempo.

— Mark Ormesher

3

Caso o link aberto não seja redirecionado, você pode abrir a guia Rede na nova guia e atualizá-la.

— orgads
fonte

2

Bata rapidamente F12 quando uma nova guia for aberta

https://stackoverflow.com/a/13747562/660408

Funciona para mim ao monitorar as respostas de download do Google Drive

— gkiko
fonte

0

* Disclaimer: Postado por desenvolvedor do HttpWatch *

O HttpWatch no Windows pode gravar o tráfego de rede gerado quando uma nova guia ou janela do Chrome é aberta, ativando a gravação automática em Ferramentas-> Opções-> Gravação. Na nova janela, clique no ícone HttpWatch para visualizar o rastreamento de rede.

A versão gratuita fornecerá informações básicas, como URL, código de status e tempo decorrido para cada solicitação.

* Disclaimer: Postado por desenvolvedor do HttpWatch *

— HttpWatchSupport
fonte