มีวิธีกรองคำขอเครือข่ายโดยใช้เครื่องมือสำหรับนักพัฒนา Google Chrome หรือไม่

เป็นไปได้ไหมที่จะกรองคำขอบางรายการโดยใช้เครื่องมือของนักพัฒนา Chrome เช่นกรองคำขอรูปภาพทั้งหมด

ไม่มีคุณสมบัติการกรองที่ยืดหยุ่นมากนัก แต่แถบที่ด้านล่างช่วยให้คุณแสดงเฉพาะคำขอของเอกสารหรือประเภทการเชื่อมต่อบางอย่าง:

คุณไม่สามารถยกเว้นรูปภาพได้ แต่ควรช่วยได้

คุณยังสามารถกดControl/ Command+ Fเพื่อค้นหาสตริงที่ต้องการในรายการคำขอและทำเครื่องหมายที่ช่อง "ตัวกรอง" เพื่อซ่อนคำขอที่ไม่ตรงกัน:

ตัวกรองข้อความเชิงลบ - รายการผลลัพธ์ไม่ตรงกับข้อความค้นหาที่ระบุ

• ใช้-.pngหรือ-.gifหรือ-.jpgเป็นตัวกรองในแผงเครือข่าย
• ตัวกรองเชิงลบอื่น ๆ อีกมากมายก็ใช้ได้เช่นกัน เช่น-mime ประเภท: image / png , -larger กว่า: 20k , -domain: yoursite.com , เลือกสถานะรหัส: 404 ดูChrome เอกสารนักพัฒนา - การเรียงลำดับและการกรอง

พร้อมใช้งานตั้งแต่ Chrome ~ 42 - ลิงก์ปัญหาประกาศที่นี่

แนวทางอื่น:ในแผงเครือข่ายให้เปิดตัวกรองและ - CTRL/CMDคลิกประเภทคำขอที่คุณต้องการแสดง เพื่อซ่อนเพียงแค่แสดงภาพแล้วเลือกประเภทอื่น ๆ ทั้งหมดยกเว้นCTRL/CMDภาพในขณะที่การถือครอง

คุณเขียน-.png -.gif -.jpในช่องใส่ฟิลเตอร์เพื่อแยกภาพทั้งหมดออกจากผลลัพธ์ ที่ด้านล่างจะแสดงจำนวนข้อมูลทั้งหมดที่ถ่ายโอนโดยไม่มีภาพ

"วิศวกรที่ Google ทำงานบน Chrome" ถูกกระตุกในเดือนธันวาคม 2557:

Chrome DevTools: ตัวกรองข้อความเชิงลบเพิ่งเข้าสู่แผงเครือข่าย แสดงผลลัพธ์ไม่ตรงกับข้อความค้นหาที่ระบุ Twitter Link

แก้ไข : คุณยังสามารถกรองตามโดเมนประเภท mime ขนาดไฟล์ ... หรือแยกออกโดยการป้อน-domain:cdn.sstatic.netและรวมสิ่งเหล่านี้mime-type:image/png -larger-than:100Kเพื่อแสดงเฉพาะไฟล์ png ที่มีขนาดเล็กกว่า 100kb ในแผงเครือข่าย

ดูDevTools: State Of The Union 2015 โดย Addy Osmani

ตั้งแต่ Chrome 42

ภายใต้การสร้าง Google Chrome ของฉัน (เวอร์ชัน 74.0.3729.157 (64 บิต)) ฉันพบตัวกรองต่อไปนี้ (ฉันได้เพิ่มตัวอย่างบางส่วน) โปรดทราบว่า DevTools มีฟังก์ชันการทำให้สมบูรณ์อัตโนมัติ (ซึ่งช่วยได้มากในการจัดเรียงสิ่งนี้ออก)

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

เช่นเดียวกับ -MimeType คุณสามารถใช้โดเมนในการป้อนข้อมูลตัวกรองเช่นนี้:

โดเมน: yourdomain.com

วิธีแก้ปัญหาที่ง่ายและสั้นและรวดเร็ว:

เพียงแค่ใส่ -.

อย่าแสดง URL ที่มีส่วนขยาย (เนื้อหาคงที่) ดังนั้นคุณจึงมี URL ที่ชัดเจนที่นี่

หากคุณเปิดเครื่องมือสำหรับนักพัฒนาให้เลือกเครือข่าย จากแถบที่ด้านล่างของหน้าให้เลือกรูปภาพหากคุณต้องการค้นหาคำขอรูปภาพโดยเฉพาะ ฟิลเตอร์เป็นแบบพิเศษทั้งหมดดังนั้นคุณจึงไม่สามารถกรองเฉพาะคำขอรูปภาพได้ ไปเลย

การเพิ่ม-MimeType:image/jpegตัวกรองได้ผลสำหรับฉัน