Solicitar monitoramento no Chrome

208

No Firefox, eu uso o Firebug, que permite visualizar todas as solicitações http que minhas chamadas ajax estão fazendo. Mudei o meu desenvolvimento para o Chrome e estou gostando até agora. Minha única reclamação, no entanto, é que as ferramentas do desenvolvedor parecem não permitir que você visualize cada solicitação de ajax. Já aconteceu uma vez em que o painel Recursos mostrou várias solicitações para o mesmo recurso, mas isso foi feito apenas uma vez e nunca mais.

Existe uma maneira de ver de maneira confiável todas as solicitações http que uma página está fazendo por meio de javascript no Chrome?

[Edit: 30/11/09 11:55]

Atualmente, para contornar isso, estou executando o Fiddler ao lado do Chrome para visualizar minhas solicitações, mas se houver uma maneira de fazer isso no navegador, prefiro isso.

ajax google-chrome httprequest Wes P
fonte
2
Eu tenho o mesmo problema - tentei todas as soluções aqui. Nada aparece na parte Response da janela XHR nas ferramentas de desenvolvimento. Apenas mostra "Esta solicitação não possui dados de resposta disponíveis". Se eu executar o mesmo código usando o firebug, ele aparecerá bem. nas configurações da cog dev tools, tentei marcar "Log XMLHttpRequest", mas isso não ajudou (o tipo de resposta é application / json). Eu tenho que fazer toda a depuração no firebug. O Firebug também formata muito bem o JSON, as ferramentas de desenvolvimento do Chrome não funcionam se você pode exibir a resposta (por exemplo, não usando ajax).
John pouco

Respostas:

359

Eu sei que esse é um tópico antigo, mas achei que sim.

Atualmente, o Chrome possui uma solução incorporada.

  1. Use CTRL+SHIFT+I(ou navegue paraCurrent Page Control > Developer > Developer Tools . Nas versões mais recentes do Chrome, clique no ícone Wrench> Ferramentas> Ferramentas do desenvolvedor.) Para ativar as Ferramentas do desenvolvedor.
  2. De dentro das ferramentas do desenvolvedor, clique no Network botão Se ainda não estiver, ative-o para a sessão ou sempre.
  3. Clique no "XHR" sub-botão.
  4. Iniciar um AJAX call .
  5. Você verá os itens começarem a aparecer na coluna da esquerda em "Resources" .
  6. Clique no recurso e existem 2 guias mostrando os cabeçalhos e o conteúdo de retorno.
Phil
fonte
2
Obrigado Phil! Eu tinha deixado isso de lado e dependia principalmente de Fiddler. Mas esse botão XHR é o que eu estava procurando: D
Wes P
ontem eu estava falando que se as ferramentas do chrome pudessem fazer isso seria perfeito, obrigado.
Germán Rodríguez
3
Oi pessoal, tentando encontrar o "sub-botão XHR" Acho que posso estar perdendo, alguém pode me dizer onde é? Este é o meu inspector parece com imgur.com/9e6yDcB
David Williams
2
Isso parece acontecer apenas se uma chamada AJAX receber uma resposta, mas não mostra uma solicitação de saída que pode não esperar uma resposta. Alguém sabe como habilitar isso?
MoMo 28/07
1
Se a página redirecionar na mesma janela, você poderá usar a caixa de seleção 'Preservar log' na parte superior das opções da guia rede (caso contrário, poderá alterar esse link para abrir na mesma janela, definindo target='_self'). Então, por exemplo, você pode ver a resposta do formulário enviado após o redirecionamento. Observe também o filtro à medida que as respostas se acumulam na nova página carregada.
precisa saber é o seguinte
57

A resposta mais atualizada para isso é: eles estão listados no botão 'Rede' nas ferramentas do desenvolvedor, não mais em 'Recursos' como costumava ser.

Wouter
fonte
5
Na verdade, é aí que está agora, levei-me a pesquisar o estouro da pilha para encontrá-lo após a atualização.
Kzqai
42

Atualizar

O Chrome mudou a maneira de inspecionar solicitações e sugere agora o uso do Catapult Netlog Viewer com os logs exportados do chrome: // net-export /

chrome://net-export/

Mais informações

Versões antigas do Chrome

Você também pode usar este link no Chrome para obter informações mais detalhadas do que o inspetor fez.

chrome://net-internals/#events

Isso mostra o log de todas as solicitações do navegador enquanto aberto

Karl Adler
fonte
Você poderia exportar isso?
21717 Pacerier
14

não sei qual versão do Chrome está disponível, mas encontrei a configuração 'Console - Log XMLHttpRequests' (clique no ícone no canto inferior direito das ferramentas do desenvolvedor no chrome no mac)

schellmax
fonte
3
Essa é a maneira mais fácil e melhor de monitorar solicitações de XHR.
precisa saber é
6

Abra seu DevTools e pressione F1 para acessar as configurações. Procure a seção do console e marque a caixa de seleção "Log XMLHttpRequests".

Agora todos os seus pedidos do ajax e outros similares serão registrados no console.

Prefiro esse método, porque geralmente me permite ver tudo o que estou procurando no console sem precisar ir para a guia rede.

ShaneDaugherty
fonte
4

Você pode usar o Fiddler, que é uma boa ferramenta gratuita.

JoshBerke
fonte
1
Sim, tenho o Fiddler, que é o que estou usando para fazer isso. Apenas procurando uma maneira de fazê-lo no navegador, pois é um pouco mais conveniente.
237 Wes Wes P
3

Obrigado a todos que tentam ajudar neste post

Eu tenho o ubuntu 13.10 e minha versão do chrome é 34.0

Para a minha situação, isso funciona

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

agora você deve ver um novo painel na sua frente 

in this panel select "Response" tab
masoud2011
fonte
1

Na etapa 5 de Phil, "Recursos" não está mais disponível na nova versão do Chrome. Você precisa clicar no ícone da página ao lado da página Ajax listada no painel inferior com as colunas Nome, Método, Status, ...

Em seguida, ele mostrará mais painéis nos quais você encontrará as mensagens de erro.

wcb1
fonte
0

Você também pode clicar com o botão direito do mouse na página do navegador e selecionar "Inspect Element" para abrir as ferramentas do desenvolvedor.

https://developer.chrome.com/devtools

BitByteDog
fonte