Cách lấy danh sách các yêu cầu mạng được thực hiện bởi HTML

Question

Làm cách nào tôi có thể nhận danh sách các yêu cầu mạng sử dụng Javascript do HTML thực hiện, như được thấy trong trình tìm kiếm chrome.

Ví dụ:

Đây là DevTools cho google.com. Tôi muốn, bằng cách sử dụng javascript có được tất cả các yêu cầu trong một danh sách. điều này có thể không? nếu có thì sao?

Answer 1

Một số trình duyệt đã triển khai phiên bản not-yet-standard, Resource Timing API nơi bạn có thể thu thập một số thông tin này.

Một số trình duyệt có thể cung cấp một số thông tin này cho tiện ích mở rộng của trình duyệt như một phần của công cụ dành cho nhà phát triển của họ, nhưng điều đó sẽ yêu cầu cài đặt tiện ích mở rộng tùy chỉnh chứ không phải một thứ có thể được thực hiện từ trang web thông thường.

Đối với các hoạt động rất cụ thể nơi bạn kiểm soát mã gọi hoặc bạn biết mã gọi điện, bạn có thể thực hiện một số việc. Ví dụ, nếu bạn biết rằng tất cả các cuộc gọi ajax đi qua một hàm cụ thể, bạn có thể móc hàm đó và trình xử lý hoàn thành của nó và theo dõi tất cả các cuộc gọi ajax.

Answer 2

Bạn có thể nhận URL yêu cầu được thực hiện khi tải trang nhưng truy xuất bất kỳ loại thống kê nào về thời gian tải là không thực tế. Truy vấn các yếu tố tạo các loại yêu cầu tài nguyên như script, link hoặc img.

Ví dụ:

var urls = Array.prototype.map.call(
    document.querySelectorAll("link, img, script, iframe"), // Elements which request external resources 
    function(e) { // Loop over and return their href/src 
     return e.href || e.src; 
    } 
); 

Answer 3

Bạn có thể sử dụng Resource Timing API để có được tất cả các thông tin liên quan (tra cứu tên miền, hits bộ nhớ cache, chuyển hướng, vv) về mỗi tài nguyên đang được nạp vào website của bạn.

Bạn có thể đọc về nó here. Ngoài ra còn có bookmarklet tạo ra thác nước tải trang bằng API này.

API thời gian nguồn có sẵn trong Chrome, Chromium, Chrome Mobile và IE10. Đội Firefox seems to be working on it.