chrome.devtools.network

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

ใช้ 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

    เป็นโมฆะ

    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