คำอธิบาย
ใช้ chrome.devtools.network
API เพื่อเรียกข้อมูลเกี่ยวกับคำขอเครือข่ายที่แสดงโดยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในแผงเครือข่าย
ข้อมูลคำขอเครือข่ายจะแสดงในรูปแบบ HTTP Archive (HAR) คำอธิบายของ HAR อยู่นอกขอบเขตของเอกสารนี้ โปรดดูข้อมูลจำเพาะของ HAR v1.2
ในแง่ของ HAR เมธอด chrome.devtools.network.getHAR()
จะแสดงผลบันทึก HAR ทั้งหมด ขณะที่
เหตุการณ์ chrome.devtools.network.onRequestFinished
มีรายการ HAR เป็นอาร์กิวเมนต์ของเหตุการณ์
Callback
โปรดทราบว่าเนื้อหาคำขอไม่ได้ให้เป็นส่วนหนึ่งของ HAR เนื่องจากเหตุผลด้านประสิทธิภาพ คุณสามารถโทรหา
เมธอด getContent()
ของคำขอเพื่อเรียกเนื้อหา
หากหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดขึ้นหลังจากหน้าเว็บโหลดแล้ว คำขอบางรายการอาจหายไปใน
อาร์เรย์ของรายการที่แสดงผลโดย getHAR()
โหลดหน้านี้ซ้ำเพื่อรับคำขอทั้งหมด โดยทั่วไปแล้ว
รายการคำขอที่ getHAR()
แสดงผลควรตรงกับที่แสดงในแผงเครือข่าย
ดูข้อมูลสรุปเกี่ยวกับ DevTools API สำหรับข้อมูลเบื้องต้นเกี่ยวกับการใช้ API เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
ไฟล์ Manifest
ตัวอย่าง
โค้ดต่อไปนี้จะบันทึก URL ของรูปภาพทั้งหมดที่มีขนาดใหญ่กว่า 40 KB เมื่อมีการโหลด
chrome.devtools.network.onRequestFinished.addListener(
function(request) {
if (request.response.bodySize > 40*1024) {
chrome.devtools.inspectedWindow.eval(
'console.log("Large image: " + unescape("' +
escape(request.request.url) + '"))');
}
}
);
หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง API ของเครื่องมือสำหรับนักพัฒนาจาก chrome-extension-samples ที่เก็บได้
ประเภท
Request
แสดงคำขอเครือข่ายสำหรับทรัพยากรเอกสาร (สคริปต์ รูปภาพ และอื่นๆ) โปรดดูข้อกำหนดของ HAR สำหรับการอ้างอิง
พร็อพเพอร์ตี้
-
getContent
เป็นโมฆะ
แสดงผลเนื้อหาของเนื้อความการตอบกลับ
ฟังก์ชัน
getContent
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(content: string, encoding: string) => void
-
เนื้อหา
สตริง
เนื้อหาของเนื้อหาการตอบกลับ (อาจเข้ารหัส)
-
การเข้ารหัส
สตริง
เว้นว่างไว้หากเนื้อหาไม่ได้เข้ารหัส หรือใช้ชื่อการเข้ารหัสเป็นอย่างอื่น ปัจจุบันรองรับเฉพาะ base64
-
-
เมธอด
getHAR()
chrome.devtools.network.getHAR(
callback: function,
)
แสดงผลบันทึก HAR ที่มีคำขอเครือข่ายที่รู้จักทั้งหมด
พารามิเตอร์
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(harLog: object) => void
-
harLog
ออบเจ็กต์
บันทึก HAR โปรดดูรายละเอียดในข้อมูลจำเพาะของ HAR
-
กิจกรรม
onNavigated
chrome.devtools.network.onNavigated.addListener(
callback: function,
)
เริ่มทำงานเมื่อหน้าต่างที่ตรวจสอบนำไปยังหน้าใหม่
พารามิเตอร์
-
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(url: string) => void
-
สตริง
-
onRequestFinished
chrome.devtools.network.onRequestFinished.addListener(
callback: function,
)
เริ่มทำงานเมื่อคำขอเครือข่ายเสร็จสิ้นและข้อมูลคำขอทั้งหมดพร้อมใช้งาน