chrome.devtools.network

คำอธิบาย

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

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

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

โปรดทราบว่าระบบไม่ได้ระบุเนื้อหาคำขอเป็นส่วนหนึ่งของ 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 ของเครื่องมือสำหรับนักพัฒนาเว็บจากที่เก็บ chrome-extension-samples

ประเภท

Request

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

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

  • getContent

    void

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

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

    () => {...}

    • returns

      Promise<object>

      รอดำเนินการ

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

เมธอด

getHAR()

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

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

Returns

  • Promise<object>

    รอดำเนินการ

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

กิจกรรม

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