chrome.devtools.network

คำอธิบาย

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

ไฟล์ Manifest

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

"devtools_page"

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

ภาพรวม

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

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

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

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

ตัวอย่าง

โค้ดต่อไปนี้จะบันทึก 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

    เป็นโมฆะ

    Promise

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

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

    (callback?: function) => {...}

    • callback

      ฟังก์ชัน ไม่บังคับ

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

      (response: object) => void

      • การตอบกลับ

        ออบเจ็กต์

        Chrome 151 ขึ้นไป

        ออบเจ็กต์ที่มีเนื้อหาการตอบกลับและการเข้ารหัส

        • เนื้อหา

          สตริง

          เนื้อหาของเนื้อหาการตอบกลับ (อาจมีการเข้ารหัส)

        • การเข้ารหัส

          สตริง

          ว่างเปล่าหากไม่ได้เข้ารหัสเนื้อหา หรือชื่อการเข้ารหัสในกรณีอื่นๆ ปัจจุบันรองรับเฉพาะ base64

    • returns

      Promise<object>

      Chrome 151 ขึ้นไป

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

      Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

เมธอด

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

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

พารามิเตอร์

  • callback

    ฟังก์ชัน ไม่บังคับ

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

    (harLog: object) => void

    • harLog

      ออบเจ็กต์

      บันทึก HAR ดูรายละเอียดได้ที่ข้อกำหนด HAR

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

  • Promise<object>

    Chrome 151 ขึ้นไป

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

    Promise รองรับเฉพาะ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

กิจกรรม

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