chrome.devtools.network

คำอธิบาย

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

ไฟล์ Manifest

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

"devtools_page"

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

ภาพรวม

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

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

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

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

ตัวอย่าง

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

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

    void

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

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

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

    • Callback

      ฟังก์ชัน

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

      (content: string,encoding: string)=>void

      • คอนเทนต์

        string

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

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

        string

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

วิธีการ

getHAR()

chrome.devtools.network.getHAR(
  callback: function,
)

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (harLog: object)=>void

    • harLog

      ออบเจ็กต์

      บันทึกของ HAR โปรดดูรายละเอียดในข้อกำหนดของ HAR

กิจกรรม

onNavigated

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (url: string)=>void

    • url

      string

onRequestFinished

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (request: Request)=>void