คำอธิบาย
ใช้ chrome.devtools.network
API เพื่อดึงข้อมูลเกี่ยวกับคำขอเครือข่ายที่แสดงโดยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในแผงเครือข่าย
ข้อมูลคำขอเครือข่ายจะแสดงในรูปแบบ HTTPที่เก็บถาวร (HAR) คำอธิบายของ HAR อยู่นอกขอบเขตของเอกสารนี้ โปรดดูข้อกำหนดของ HAR v1.2
ในแง่ของ HAR เมธอด chrome.devtools.network.getHAR()
จะแสดงผลบันทึก HAR ทั้งหมด ขณะที่เหตุการณ์ chrome.devtools.network.onRequestFinished
จะแสดง รายการ HAR เป็นอาร์กิวเมนต์ให้กับโค้ดเรียกกลับของเหตุการณ์
โปรดทราบว่าไม่มีการให้เนื้อหาคำขอเป็นส่วนหนึ่งของ HAR เพื่อเหตุผลด้านประสิทธิภาพ คุณอาจเรียกใช้เมธอด getContent()
ของคำขอเพื่อดึงเนื้อหา
หากหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดขึ้นหลังจากโหลดหน้าเว็บ คำขอบางรายการอาจหายไปในอาร์เรย์ของรายการที่แสดงผลโดย getHAR()
โหลดหน้านี้ซ้ำเพื่อรับคำขอทั้งหมด โดยทั่วไป รายการคำขอที่ getHAR()
แสดงผลควรตรงกับที่แสดงในแผงเครือข่าย
ดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ในข้อมูลสรุปเกี่ยวกับ DevTools API
ไฟล์ Manifest
ตัวอย่าง
โค้ดต่อไปนี้จะบันทึก 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,
)
เริ่มทำงานเมื่อคำขอเครือข่ายเสร็จสิ้นและข้อมูลคำขอทั้งหมดพร้อมใช้งาน