Có cách nào để lọc các yêu cầu mạng bằng các công cụ dành cho nhà phát triển của Google Chrome không?

Có thể lọc ra một số yêu cầu bằng các công cụ dành cho nhà phát triển Chrome, giả sử, lọc ra tất cả các yêu cầu hình ảnh?

Không có tính năng lọc rất linh hoạt, nhưng thanh ở phía dưới không cho phép bạn chỉ hiển thị các yêu cầu của một loại tài liệu hoặc loại kết nối nhất định:

Bạn không thể loại trừ hình ảnh, nhưng nó sẽ giúp.

Bạn cũng có thể nhấn Control/ Command+ Fđể tìm kiếm một chuỗi cụ thể trong danh sách yêu cầu và chọn hộp "bộ lọc" để ẩn các yêu cầu không khớp:

Bộ lọc văn bản phủ định - liệt kê kết quả không khớp với truy vấn đã cho.

• Sử dụng -.png hoặc -.gif hoặc -.jpg làm bộ lọc trong bảng điều khiển mạng.
• Nhiều bộ lọc tiêu cực khác cũng hoạt động. ví dụ -mime-type: image / png , -larger-than: 20k , -domain: yoursite.com , -status-code: 404 . Xem tài liệu dành cho nhà phát triển Chrome - Sắp xếp và lọc .

Có sẵn kể từ Chrome ~ 42 - Liên kết phát hành , được công bố tại đây

Một cách tiếp cận khác: Trong bảng điều khiển Mạng, mở bộ lọc và CTRL/CMDnhấp vào các loại yêu cầu bạn muốn hiển thị. Để ẩn chỉ yêu cầu hình ảnh, sau đó chọn tất cả các loại khác ngoại trừ hình ảnh trong khi giữ CTRL/CMD.

Bạn viết -.png -.gif -.jpvào hộp nhập bộ lọc để loại trừ tất cả hình ảnh khỏi kết quả. Ở phía dưới, nó hiển thị tổng số lượng dữ liệu được truyền mà không có hình ảnh.

Một "Kỹ sư tại Google làm việc trên Chrome" đã đăng lên twitter vào ngày 14 tháng 12:

Chrome DevTools: Bộ lọc văn bản phủ định vừa hạ cánh trong bảng điều khiển Mạng. Liệt kê các kết quả không khớp với một truy vấn nhất định Liên kết Twitter

chỉnh sửa : bạn thậm chí có thể lọc theo tên miền, loại mime, kích thước tệp, ... hoặc loại trừ bằng cách nhập -domain:cdn.sstatic.netvà kết hợp bất kỳ mime-type:image/png -larger-than:100Ktệp nào trong số này để chỉ hiển thị các tệp png nhỏ hơn 100kb trong bảng điều khiển mạng

xem DevTools: State Of The Union 2015 của Addy Osmani

Kể từ Chrome 42 .

Trong bản dựng Google Chrome của tôi (Phiên bản 74.0.3729.157 (64-bit)), tôi đã tìm thấy các bộ lọc sau đây (tôi đã thêm một số ví dụ). Lưu ý rằng DevTools có chức năng AutoComplete (giúp ích rất nhiều trong việc sắp xếp công cụ này).

domain:
-domain:
    # Use a * character to include multiple domains.
    # Ex:  *.com, domain:google.com, -domain:bing.com

has-response-header:
-has-response-header:
    # Filter resources with the specified HTTP response header.
    # Ex: has-response-header:Content-Type, has-response-header:age

is:
-is:
    # is:running finds WebSocket resources
    # I've also come across:
    #  - is:from-cache,
    #  - is:service-worker-initiated
    #  - is:service-worker-intercepted


larger-than:
-larger-than:
    # Note: larger-than:1000 is equivalent to larger-than:1k
    # Ex: larger-than:420, larger-than:4k, larger-than:100M

method:
-method:
    # method:POST, -method:OPTIONS, method:PUT, method:GET

mime-type:
-mime-type:
    # Ex: mime-type:application/manifest+json, mimetype:image/x-icon


mixed-content:
-mixed-content:
    # 2 that I've found documented: 
    #   mixed-content:all (Show all mixed-content resources) 
    #   mixed-content:displayed (Show only those currently displayed) (never used this personally)

scheme:
-scheme:
    # Ex: scheme:http, scheme:https,
    # Note that there are also scheme:chrome-extension, scheme:data

set-cookie-domain:
-set-cookie-domain:
    # 
    # Ex: set-cookie-domain:.google.com

set-cookie-name:
-set-cookie-name:
    # Match Set-Cookie response headers with name
    # Ex: set-cookie-name:WHATUP

set-cookie-value:
-set-cookie-value:
    # Match Set-Cookie response headers with value
    # Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo

status-code:
-status-code:
    # Match HTTP status code
    # Ex: status-code:200, -status-code:302

Giống như -MimeType, bạn có thể sử dụng tên miền trong đầu vào bộ lọc, như thế này:

tên miền: yourdomain.com

Một giải pháp đơn giản và ngắn gọn và nhanh chóng:

Chỉ cần đặt -.

Vì không hiển thị bất kỳ url nào có tiện ích mở rộng (nội dung tĩnh), vì vậy bạn có URL rõ ràng ở đây.

Nếu bạn mở các công cụ phát triển, chọn mạng. Từ thanh ở cuối trang, chọn hình ảnh nếu bạn muốn tìm cụ thể cho các yêu cầu hình ảnh. Các bộ lọc đều độc quyền, vì vậy bạn không thể chỉ lọc các yêu cầu hình ảnh. Có bạn đi.

Thêm một -MimeType:image/jpegbộ lọc làm việc cho tôi.