Richiedi il monitoraggio in Chrome


209

In Firefox, utilizzo Firebug che mi permette di visualizzare tutte le richieste http che le mie chiamate ajax stanno facendo. Ho passato il mio sviluppo a Chrome e finora mi piace. La mia unica lamentela, tuttavia, è che gli strumenti per sviluppatori non sembrano permetterti di visualizzare ogni richiesta Ajax. Ho avuto successo una volta in cui il pannello Risorse mostrava più richieste alla stessa risorsa, ma lo ha fatto solo una volta e mai più.

Esiste un modo per vedere in modo affidabile ogni richiesta http che una pagina sta inviando tramite javascript da Chrome?

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

Attualmente, per ovviare a questo, sto eseguendo Fiddler accanto a Chrome per visualizzare le mie richieste, ma se c'è un modo per farlo all'interno del browser, lo preferirei.


2
Ho lo stesso problema: ho provato tutte le soluzioni qui. Nulla appare nella parte Response della finestra XHR negli strumenti di sviluppo. Mostra solo "Questa richiesta non ha dati di risposta disponibili". Se eseguo lo stesso codice usando firebug, si presenta bene. nelle impostazioni degli strumenti di sviluppo ingranaggio, ho provato a selezionare "Log XMLHttpRequest" ma questo non ha aiutato (il tipo di risposta è application / json). Devo fare tutto il debug in firebug. Firebug formatta anche correttamente JSON, Chrome Dev Tools non funziona se riesci a visualizzarne la risposta (ad es. Non usando Ajax).
John Little,

Risposte:


359

So che questo è un vecchio thread, ma ho pensato di entrare.

Chrome attualmente ha una soluzione integrata.

  1. Usa CTRL+SHIFT+I(o vai a Current Page Control > Developer > Developer Tools. Nelle versioni più recenti di Chrome, fai clic sull'icona Chiave inglese> Strumenti> Strumenti per sviluppatori.) Per abilitare gli Strumenti per sviluppatori.
  2. Dall'interno degli strumenti di sviluppo fai clic sul Networkpulsante. Se non lo è già, abilitalo per la sessione o sempre.
  3. Fai clic sul "XHR"pulsante secondario.
  4. Avvia un AJAX call.
  5. Vedrai gli oggetti iniziare a comparire nella colonna di sinistra sotto "Resources".
  6. Fai clic sulla risorsa e ci sono 2 schede che mostrano le intestazioni e restituiscono il contenuto.

2
Grazie Phil! L'avevo messo da parte e mi affidavo principalmente a Fiddler. Ma quel pulsante XHR è quello che stavo cercando: D
Wes P

proprio ieri stavo parlando che se gli strumenti di Chrome potessero farlo sarebbe perfetto, grazie.
Germán Rodríguez,

3
Ciao a tutti, provando a trovare il "sotto-pulsante XHR" Penso che mi mancherà, qualcuno può dirmi dove si trova? ecco come appare il mio ispettore imgur.com/9e6yDcB
David Williams,

2
Questo sembra accadere solo se una chiamata AJAX riceve una risposta, ma non mostra una richiesta in uscita che potrebbe non aspettarsi una risposta. Qualcuno sa come abilitarlo?
MoMo,

1
Se la pagina reindirizza sulla stessa finestra, è possibile utilizzare la casella di controllo "Conserva registro" nella parte superiore delle opzioni della scheda di rete (in caso contrario, è possibile modificare quel collegamento per aprirlo nella stessa finestra impostando target='_self'). Quindi, ad esempio, puoi vedere la risposta dal modulo che è stato inviato dopo che ti reindirizza. Assicurati di notare anche il filtro quando le risposte si accumulano al caricamento di nuove pagine.
JeremyS,

57

La risposta più aggiornata a questo è: sono elencate sotto il pulsante "Rete" negli strumenti di sviluppo, non più in "Risorse" come una volta.


5
Questo è davvero dove si trova ora, mi ha portato a cercare lo stack overflow per trovarlo dopo l'aggiornamento.
Kzqai,

42

Aggiornare

Chrome ha cambiato il modo di ispezionare le richieste e suggerisce ora di utilizzare Catapult Netlog Viewer con i log esportati da chrome: // net-export /

chrome://net-export/

Ulteriori informazioni

Vecchie versioni di Chrome

Puoi anche utilizzare questo link in Chrome per informazioni più dettagliate di quelle dell'ispettore.

chrome://net-internals/#events

Questo mostra il registro di tutte le richieste del browser mentre è aperto


Potresti esportarlo?
Pacerier,

14

non so da quale versione di Chrome sia disponibile, ma ho trovato un'impostazione "Console - Log XMLHttpRequests" (facendo clic sull'icona nell'angolo in basso a destra degli strumenti di sviluppo in Chrome su Mac)


3
Questo è il modo più semplice e migliore per monitorare le richieste XHR.
CourtDemone,

6

Apri DevTools e premi F1 per accedere alle impostazioni. Cerca la sezione console e seleziona la casella di controllo "Log XMLHttpRequests".

Ora tutte le tue richieste Ajax e simili saranno registrate nella console.

Preferisco questo metodo perché di solito mi consente di vedere tutto ciò che sto cercando nella console senza dover accedere alla scheda di rete.


4

Puoi usare Fiddler che è un buon strumento gratuito.


1
Sì, ho Fiddler che è quello che sto usando per fare questo. Sto solo cercando un modo per farlo dall'interno del browser, in quanto è un po 'più conveniente.
Wes P,

3

Grazie a tutti coloro che hanno cercato di aiutare in questo post

Ho Ubuntu 13.10 e la mia versione di Chrome è 34.0

Per la mia situazione funziona

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

ora dovresti vedere un nuovo pannello di fronte alla tua richiesta

in this panel select "Response" tab

1

Nel passaggio 5 di Phil, "Risorse" non è più disponibile nella nuova versione di Chrome. Devi fare clic sull'icona della pagina proprio accanto alla pagina Ajax elencata nel riquadro inferiore con le colonne di Nome, Metodo, Stato, ...

Quindi ti mostrerà più pannelli in cui troverai i messaggi di errore.


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.