Đặt điểm ngắt trong XHR trong Chrome

Question

Tôi có một trang gửi yêu cầu XHR khi biểu mẫu được gửi và tôi muốn Chrome bị ngắt khi nhận được phản hồi. Dường như cách tốt nhất để thực hiện điều này là nếu Chrome có chức năng javascript mà tôi có thể gọi là ngắt kết nối nhưng tôi không thể tìm thấy bất kỳ thứ gì như thế cho đến thời điểm này. Có giải pháp nào khác không?

Sửa:

tôi không thực sự có một cuộc gọi lại định nghĩa cho các yêu cầu nên tôi không thể thiết lập một breakpoint như vậy. Yêu cầu đang được gửi đi với dòng mã này jquery:

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

nơi this là một yếu tố hình thức. Đối số null là nơi bạn thường định nghĩa một cuộc gọi lại nhưng với đối số "script", javascript thô được trả về bởi máy chủ và sau đó được thực thi trực tiếp, do đó, có vẻ như cách duy nhất để ngắt và bước qua mã là câu lệnh debugger;. Điều này làm việc, nhưng khi bước qua mã bạn không thể thực sự nhìn thấy dòng bạn đang ở trên để một chút vụng về của nó. Tôi nghi ngờ rằng đây là một hạn chế của các công cụ gỡ lỗi của Chrome.

Answer 1

Bạn chỉ có thể đặt điểm ngắt trong gọi lại thành công và bước qua trình gỡ lỗi. Để đặt điểm ngắt:

1. Mở "Công cụ nhà phát triển" và nhấp vào tab "Tập lệnh" ở trên cùng.
2. Chọn tập lệnh chứa gọi lại thành công cho yêu cầu AJAX của bạn.
3. Nhấp vào số dòng ở phía bên tay trái nơi bạn muốn điểm ngắt. Mũi tên màu xanh sẽ xuất hiện cho biết điểm ngắt đã được đặt.
4. Sau đó thực hiện yêu cầu AJAX như bạn muốn và trình gỡ lỗi sẽ tự động dừng tại điểm ngắt bạn đã đặt.

Hoặc, bạn có thể sử dụng câu lệnh debugger để tự động gọi trình gỡ lỗi. Vì vậy, với điều này gọi lại thành công của bạn có thể trông giống như:

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

Cũng kiểm thoải mái article này để gỡ lỗi JavaScript.

Tuy nhiên, cách tiếp cận đầu tiên tốt hơn vì không yêu cầu bạn sửa đổi mã của mình.

Answer 2

Bạn cũng có thể chuyển đến tab tập lệnh trong công cụ nhà phát triển và ở bên phải, bạn nhấp vào Điểm ngắt XHR và thêm điểm ngắt mới với lọc url.

Nếu bạn sử dụng jQuery, khi điểm ngắt xảy ra, bạn có thể sử dụng CallStack để tìm chức năng của mình được gọi là jQuery.ajax.

Answer 3

thả xuống chrome console (ctrl + shift + k) và gõ bất kỳ trong số này:

Chỉ cần viết lại jquery ajax:

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

hoặc nếu bạn không sử dụng jQuery, viết lại XHR lớp học:

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

Sau khi ngắt, chỉ cần nhấn shift + f11 cho đến khi bạn tìm thấy phương thức khởi tạo yêu cầu ajax.