chrome.devtools.network

คำอธิบาย

ใช้ chrome.devtools.network API เพื่อดึงข้อมูลเกี่ยวกับคำขอเครือข่ายที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แสดงในแผงเครือข่าย

ข้อมูลคำขอเครือข่ายจะแสดงในรูปแบบ HTTP Archive (HAR) คำอธิบายของ HAR อยู่นอกขอบเขตของเอกสารนี้ โปรดดูข้อกำหนด HAR v1.2

ในส่วนของ HAR เมธอด chrome.devtools.network.getHAR() จะแสดงผลบันทึก HAR ทั้งหมด ขณะที่เหตุการณ์ chrome.devtools.network.onRequestFinished จะระบุรายการ HAR เป็นอาร์กิวเมนต์ไปยัง การเรียกกลับของเหตุการณ์

โปรดทราบว่าเราจะไม่ระบุเนื้อหาคำขอเป็นส่วนหนึ่งของ HAR เพื่อประสิทธิภาพ คุณอาจเรียกใช้เมธอด getContent() ของคำขอเพื่อดึงข้อมูลเนื้อหา

หากเปิดหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์หลังจากโหลดหน้าเว็บแล้ว คำขอบางรายการอาจหายไปใน อาร์เรย์ของรายการที่ getHAR() ส่งคืน โหลดหน้าเว็บซ้ำเพื่อรับคำขอทั้งหมด โดยทั่วไป รายการคำขอที่ getHAR() แสดงควรตรงกับรายการที่แสดงในแผงเครือข่าย

ดูข้อมูลเบื้องต้นเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ที่สรุป API ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ไฟล์ Manifest

ต้องประกาศคีย์ต่อไปนี้ในไฟล์ Manifest เพื่อใช้ API นี้

"devtools_page"

ตัวอย่าง

โค้ดต่อไปนี้จะบันทึก 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 ของ DevTools จากที่เก็บ chrome-extension-samples

ประเภท

Request

แสดงคำขอเครือข่ายสำหรับทรัพยากรเอกสาร (สคริปต์ รูปภาพ และอื่นๆ) ดูข้อกำหนด HAR เพื่อใช้อ้างอิง

พร็อพเพอร์ตี้

  • getContent

    เป็นโมฆะ

    แสดงผลเนื้อหาของเนื้อหาการตอบกลับ

    ฟังก์ชัน getContent มีลักษณะดังนี้ 

    () => {...}

    • returns

      Promise<object>

      Chrome 151 ขึ้นไป

      ฟังก์ชันที่รับเนื้อหาการตอบกลับเมื่อคำขอเสร็จสมบูรณ์

เมธอด

getHAR()

chrome.devtools.network.getHAR(): Promise<object>

แสดงบันทึก HAR ที่มีคำขอเครือข่ายที่ทราบทั้งหมด

การคืนสินค้า

  • Promise<object>

    Chrome 151 ขึ้นไป

    ฟังก์ชันที่รับบันทึก HAR เมื่อคำขอเสร็จสมบูรณ์

กิจกรรม

onNavigated

chrome.devtools.network.onNavigated.addListener(
  callback: function,
)

ทริกเกอร์เมื่อหน้าต่างที่ตรวจสอบไปยังหน้าใหม่

พารามิเตอร์

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (url: string) => void

    • URL

      สตริง

onRequestFinished

chrome.devtools.network.onRequestFinished.addListener(
  callback: function,
)

เริ่มทำงานเมื่อคำขอของเครือข่ายเสร็จสิ้นและข้อมูลคำขอทั้งหมดพร้อมใช้งาน

พารามิเตอร์

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (request: Request) => void