chrome.devtools.network

คำอธิบาย

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

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

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

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

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

ดูข้อมูลสรุปเกี่ยวกับ DevTools 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

    เป็นโมฆะ

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

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

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

    • Callback

      ฟังก์ชัน

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

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

      • เนื้อหา

        สตริง

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

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

        สตริง

        เว้นว่างไว้หากเนื้อหาไม่ได้เข้ารหัส หรือใช้ชื่อการเข้ารหัสเป็นอย่างอื่น ปัจจุบันรองรับเฉพาะ 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

      สตริง

onRequestFinished

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (request: Request) => void