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 เวอร์ชัน 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 เครื่องมือสำหรับนักพัฒนาเว็บจากที่เก็บ chrome-extension-samples

ประเภท

Request

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

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

  • getContent

    void

    Promise

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

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

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

    • callback

      function ไม่บังคับ

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

      (response: object) => void

      • การตอบกลับ

        ออบเจ็กต์

        Chrome 151 ขึ้นไป

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

        • เนื้อหา

          สตริง

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

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

          สตริง

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

    • returns

      Promise<object>

      Chrome 151 ขึ้นไป

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

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

เมธอด

getHAR()

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

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

พารามิเตอร์

  • callback

    function ไม่บังคับ

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

    (harLog: object) => void

    • harLog

      ออบเจ็กต์

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

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

  • Promise<object>

    Chrome 151 ขึ้นไป

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

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

กิจกรรม

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