chrome.devtools.network

คำอธิบาย

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

ไฟล์ Manifest

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

"devtools_page"

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

ภาพรวม

ข้อมูลคำขอเครือข่ายจะแสดงในรูปแบบ HTTP Archive (HAR) คำอธิบายของ HAR อยู่นอกขอบเขตของเอกสารนี้ โปรดดูข้อกำหนด HAR v1.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 ของเครื่องมือสำหรับนักพัฒนาเว็บจากที่เก็บ chrome-extension-samples

ประเภท

Request

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

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

  • getContent

    void

    Promise

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

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

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

    • callback

      function optional

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

      (response: object) => void

      • response

        ออบเจ็กต์

        Pending

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

        • content

          สตริง

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

        • encoding

          สตริง

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

    • returns

      Promise<object>

      Pending

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

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

เมธอด

getHAR()

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

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

พารามิเตอร์

  • callback

    function optional

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

    (harLog: object) => void

    • harLog

      ออบเจ็กต์

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

Returns

  • Promise<object>

    Pending

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

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

กิจกรรม

onNavigated

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

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

พารามิเตอร์

  • callback

    function

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

    (url: string) => void

    • url

      สตริง

onRequestFinished

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

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

พารามิเตอร์

  • callback

    function

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

    (request: Request) => void