Yêu cầu giám sát trong Chrome


208

Trong Firefox, tôi sử dụng Fireorms cho phép tôi xem mọi yêu cầu http mà các cuộc gọi ajax của tôi đang thực hiện. Tôi đã chuyển sự phát triển của mình sang Chrome và cho đến nay vẫn thích nó. Tuy nhiên, khiếu nại duy nhất của tôi là các công cụ dành cho nhà phát triển dường như không cho phép bạn xem từng yêu cầu ajax. Tôi đã từng xảy ra một lần khi bảng Tài nguyên hiển thị nhiều yêu cầu cho cùng một tài nguyên, nhưng nó chỉ được thực hiện một lần và không bao giờ lặp lại.

Có cách nào đáng tin cậy để xem mọi yêu cầu http mà một trang đang thực hiện thông qua javascript từ trong Chrome không?

[Chỉnh sửa: 11/30/09 11:55]

Hiện tại, để giải quyết vấn đề này, tôi đang chạy Fiddler bên cạnh Chrome để xem các yêu cầu của tôi, nhưng nếu có cách nào để thực hiện điều đó từ trong trình duyệt, tôi thích điều đó hơn.


2
Tôi có cùng một vấn đề - đã thử tất cả các giải pháp ở đây. Không có gì xuất hiện trong phần Phản hồi của cửa sổ XHR trong các công cụ dev. Nó chỉ hiển thị "Yêu cầu này không có sẵn dữ liệu phản hồi". Nếu tôi chạy cùng một mã bằng cách sử dụng fireorms, nó sẽ hiển thị tốt. trong cài đặt công cụ phát triển cog, tôi đã thử đánh dấu vào "Nhật ký XMLHttpRequest" nhưng điều này không giúp được gì (loại phản hồi là application / json). Tôi phải làm tất cả gỡ lỗi trong fireorms. Fireorms cũng định dạng JSON độc đáo, các công cụ phát triển chrome không nếu bạn có thể làm cho nó hiển thị phản hồi (ví dụ: không sử dụng ajax).
John Little

Câu trả lời:


359

Tôi biết đây là một chủ đề cũ nhưng tôi nghĩ rằng tôi sẽ kêu vang.

Chrome hiện có một giải pháp tích hợp.

  1. Sử dụng CTRL+SHIFT+I(hoặc điều hướng đến Current Page Control > Developer > Developer Tools. Trong các phiên bản Chrome mới hơn, hãy nhấp vào biểu tượng Cờ lê> Công cụ> Công cụ dành cho nhà phát triển.) Để bật Công cụ dành cho nhà phát triển.
  2. Từ trong các công cụ phát triển bấm vào Networknút. Nếu chưa, hãy bật nó cho phiên hoặc luôn.
  3. Nhấp vào nút "XHR"phụ.
  4. Bắt đầu một AJAX call.
  5. Bạn sẽ thấy các mục bắt đầu hiển thị ở cột bên trái bên dưới "Resources".
  6. Nhấp vào tài nguyên và có 2 tab hiển thị tiêu đề và trả về nội dung.

2
Cảm ơn Phil! Tôi đã đặt cái này sang một bên và chủ yếu dựa vào Fiddler. Nhưng nút XHR đó là thứ tôi đang tìm kiếm: D
Wes P

Mới hôm qua tôi đã nói rằng nếu các công cụ chrome có thể làm điều này thì nó sẽ hoàn hảo, cảm ơn bạn.
Germán Rodríguez

3
Xin chào, hãy thử tìm "nút phụ XHR" Tôi nghĩ rằng tôi có thể đang thiếu nó, ai đó có thể cho tôi biết đó là đâu không? đây là những gì thanh tra của tôi trông giống như imgur.com/9e6yDcB
David Williams

2
Điều này dường như chỉ xảy ra nếu một cuộc gọi AJAX nhận được phản hồi, nhưng nó không hiển thị cho bạn một yêu cầu gửi đi mà có thể không mong đợi phản hồi. Bất cứ ai biết làm thế nào để kích hoạt điều đó?
MoMo

1
Nếu trang chuyển hướng trên cùng một cửa sổ, bạn có thể sử dụng hộp kiểm 'Nhật ký bảo tồn' ở đầu các tùy chọn tab mạng (nếu không, bạn có thể thay đổi liên kết đó để mở trong cùng một cửa sổ bằng cách cài đặt target='_self'). Sau đó, ví dụ, bạn có thể thấy phản hồi từ biểu mẫu đã được gửi sau khi nó chuyển hướng bạn. Đảm bảo cũng chú ý đến bộ lọc khi các phản hồi chồng chất khi tải trang mới.
JeremyS

57

Câu trả lời cập nhật nhất cho vấn đề này là: chúng được liệt kê dưới nút 'Mạng' trong các công cụ dành cho nhà phát triển, không còn dưới 'Tài nguyên' như trước đây.


5
Đó thực sự là nơi hiện tại, tôi đã tìm kiếm stack stack để tìm nó sau khi nâng cấp.
Kzqai

42

Cập nhật

Chrome đã thay đổi cách kiểm tra các yêu cầu và đề xuất ngay bây giờ để sử dụng Trình xem Netlog Catapult với nhật ký được xuất từ chrome: // net-export /

chrome://net-export/

Thêm thông tin

Phiên bản Chrome cũ

Bạn cũng có thể sử dụng liên kết này trong Chrome để biết thông tin chi tiết hơn so với người kiểm tra đã làm.

chrome://net-internals/#events

Điều này cho thấy nhật ký của tất cả các yêu cầu của trình duyệt trong khi mở


Bạn có thể xuất khẩu đó?
Pacerier

14

không biết phiên bản chrome nào có sẵn, nhưng tôi đã tìm thấy cài đặt 'Bảng điều khiển - Đăng nhập XMLHttpRequests' (nhấp vào biểu tượng ở góc dưới bên phải của công cụ dành cho nhà phát triển trong chrome trên mac)


3
Đây là cách dễ nhất và tốt nhất để theo dõi các yêu cầu XHR.
CourtDemone

6

Mở DevTools của bạn và nhấn F1 để truy cập cài đặt. Tìm phần giao diện điều khiển và kiểm tra hộp kiểm cho "Nhật ký XMLHttpRequests".

Bây giờ tất cả ajax của bạn và các yêu cầu tương tự khác sẽ được đăng nhập vào bảng điều khiển.

Tôi thích phương pháp này vì nó thường cho phép tôi xem mọi thứ tôi đang tìm kiếm trong bảng điều khiển mà không cần phải đi đến tab mạng.


4

Bạn có thể sử dụng Fiddler , một công cụ miễn phí tốt.


1
Phải, tôi có Fiddler, thứ tôi đang sử dụng để làm việc này. Chỉ cần tìm cách để làm điều đó từ trong trình duyệt, vì nó thuận tiện hơn một chút.
Wes P

3

Cảm ơn tất cả những người cố gắng giúp đỡ trong bài viết này

Tôi có Ubuntu 13.10 và phiên bản chrome của tôi là 34.0

Đối với tình hình của tôi, công việc này

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

bây giờ bạn sẽ thấy một Bảng điều khiển mới trước mặt bạn yêu cầu

in this panel select "Response" tab

1

Trong bước 5 của Phil, "Tài nguyên" không còn có sẵn trong phiên bản Chrome mới. Bạn cần nhấp vào biểu tượng trang ngay bên cạnh trang Ajax được liệt kê ở khung bên dưới với các cột Tên, Phương thức, Trạng thái, ...

Sau đó, nó sẽ hiển thị cho bạn nhiều bảng hơn nơi bạn sẽ tìm thấy các thông báo lỗi.


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.