Imposta un punto di interruzione in XHR in Chrome

Question

Ho una pagina che invia una richiesta XHR quando viene inviato un modulo e vorrei interrompere Chrome quando riceve una risposta. Sembra che il modo migliore per farlo sarebbe se Chrome avesse una funzione javascript che posso chiamare che interrompe l'esecuzione ma finora non sono riuscito a trovare nulla di simile. C'è un'altra soluzione?

Edit:

io in realtà non hanno un callback definita per la richiesta, quindi non posso impostare un punto di interruzione in questo modo. La richiesta viene inviata con questa linea di codice jquery:

$.post(this.action, $(this).serialize(), null, "script"); 

dove this è un elemento del modulo. L'argomento null è dove solitamente definiresti un callback ma con l'argomento "script", il javascript raw viene restituito dal server e quindi eseguito direttamente, quindi sembra che l'unico modo per interrompere e passare attraverso il codice sia con l'istruzione debugger;. Funziona, ma quando si passa attraverso il codice non si può effettivamente vedere su quale linea ci si trova, quindi è un po 'imbarazzante. Sospetto che si tratti di una limitazione degli strumenti di debug di Chrome.

Answer 1

È possibile impostare un punto di interruzione nella richiamata di successo e scorrere il debugger. Per impostare un punto di interruzione:

1. Aprire "Strumenti per sviluppatori" e fare clic sulla scheda "Script" in alto.
2. Selezionare lo script che contiene la chiamata di successo per la richiesta AJAX.
3. Fare clic sul numero di linea sul lato sinistro in cui si desidera il punto di interruzione. Una freccia blu apparirà indicando che il punto di interruzione è stato impostato.
4. Quindi effettuare la richiesta AJAX come si desidera e il debugger si fermerà automaticamente al punto di interruzione impostato.

In alternativa, è possibile utilizzare l'istruzione debugger per richiamare automaticamente il debugger. Quindi, con questo il tuo callback successo può apparire come:

success: function(data, textStatus, request) { 
    debugger; // pause execution and opens debugger at this point 
    ... 
} 

anche checkout questo bel article per il debug JavaScript.

Tuttavia, il primo approccio è migliore in quanto non richiede di modificare il codice.

Answer 2

È anche possibile accedere alla scheda Script nello strumento di sviluppo e sul lato destro si fa clic su Punti di interruzione XHR e si aggiunge un nuovo punto di interruzione con filtro URL.

Se si utilizza jQuery, quando si verifica il punto di interruzione è possibile utilizzare CallStack per trovare la funzione che ha chiamato jQuery.ajax.

Answer 3

discesa console cromata (Ctrl + Shift + j) e digitare uno di questi:

Basta riscrivere il jquery ajax:

var prevajax = jQuery.ajax; 
jQuery.ajax = function() { debugger; return prevajax.apply(jQuery, arguments); }; 

o se non si utilizza jQuery, riscrivere il XHR classe:

var prevxhr = XMLHttpRequest; 
XMLHttpRequest = function(){debugger; prevxhr.apply(this, arguments);}; 

Dopo si rompe, basta premere Shift + F11 fino a trovare il metodo che avvia la richiesta Ajax.