หน้านี้ได้รับการแปลโดย Cloud Translation API

chrome.devtools.network

คำอธิบาย

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

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

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

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

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

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

ไฟล์ Manifest

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

"devtools_page"

ตัวอย่าง

โค้ดต่อไปนี้จะบันทึก 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
```
- ส่งคำขอ
  
  คำขอ