browser.devtools.network

คำอธิบาย

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

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

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

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

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

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

ไฟล์ Manifest

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

"devtools_page"

ตัวอย่าง

โค้ดต่อไปนี้จะบันทึก URL ของรูปภาพทั้งหมดที่มีขนาดใหญ่กว่า 40 KB เมื่อโหลด

browser.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      browser.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