คำอธิบาย
ใช้ chrome.devtools.network
API เพื่อดึงข้อมูลเกี่ยวกับคำขอเครือข่ายที่แสดงโดยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในแผงเครือข่าย
ไฟล์ Manifest
ดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ในข้อมูลสรุปเกี่ยวกับ DevTools API
ภาพรวม
ข้อมูลคำขอเครือข่ายจะแสดงในรูปแบบ HTTPที่เก็บถาวร (HAR) คำอธิบายของ HAR อยู่นอกขอบเขตของเอกสารนี้ โปรดดูข้อกำหนดสำหรับ HAR v1.2
ในแง่ของ HAR เมธอด chrome.devtools.network.getHAR()
จะแสดงผลบันทึก HAR ทั้งหมด ขณะที่เหตุการณ์ chrome.devtools.network.onRequestFinished
จะแสดง รายการ HAR เป็นอาร์กิวเมนต์ให้กับโค้ดเรียกกลับของเหตุการณ์
โปรดทราบว่าไม่มีการให้เนื้อหาคำขอเป็นส่วนหนึ่งของ HAR เพื่อเหตุผลด้านประสิทธิภาพ คุณอาจเรียกใช้เมธอด getContent()
ของคำขอเพื่อดึงเนื้อหา
หากหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดขึ้นหลังจากโหลดหน้าเว็บ คำขอบางรายการอาจหายไปในอาร์เรย์ของรายการที่แสดงผลโดย getHAR()
โหลดหน้านี้ซ้ำเพื่อรับคำขอทั้งหมด โดยทั่วไป รายการคำขอที่ getHAR()
แสดงผลควรตรงกับที่แสดงในแผงเครือข่าย
ตัวอย่าง
โค้ดต่อไปนี้จะบันทึก URL ของรูปภาพทั้งหมดที่มีขนาดใหญ่กว่า 40KB เมื่อโหลด
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 สำหรับ devtools จากที่เก็บ chrome-extension-samples
ประเภท
Request
แสดงคำขอเครือข่ายสำหรับทรัพยากรเอกสาร (สคริปต์ รูปภาพ และอื่นๆ) ดูข้อกำหนดของ HAR สำหรับการอ้างอิง
พร็อพเพอร์ตี้
-
getContent
void
แสดงผลเนื้อหาของเนื้อความการตอบกลับ
ฟังก์ชัน
getContent
มีลักษณะดังนี้(callback: function) => {...}
-
Callback
ฟังก์ชัน
พารามิเตอร์
callback
มีลักษณะดังนี้(content: string, encoding: string) => void
-
คอนเทนต์
string
เนื้อหาของเนื้อหาการตอบกลับ (อาจเข้ารหัส)
-
การเข้ารหัส
string
เว้นว่างไว้หากเนื้อหาไม่ได้เข้ารหัสไว้ หากเข้ารหัสไม่ใช่ชื่อ ปัจจุบันรองรับเฉพาะ 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
-
string
-
onRequestFinished
chrome.devtools.network.onRequestFinished.addListener(
callback: function,
)
เริ่มทำงานเมื่อคำขอเครือข่ายเสร็จสิ้นและข้อมูลคำขอทั้งหมดพร้อมใช้งาน