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

chrome.devtools.panels

คำอธิบาย

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

ไฟล์ Manifest

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

"devtools_page"

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

ภาพรวม

แต่ละแผงส่วนขยายและแถบด้านข้างจะแสดงเป็นหน้า HTML แยกกัน หน้าส่วนขยายทั้งหมดที่แสดง ในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะมีสิทธิ์เข้าถึงโมดูลทั้งหมดใน chrome.devtools API รวมทั้ง chrome.extension API API ส่วนขยายอื่นๆ ไม่พร้อมใช้งานในหน้าเว็บภายในนักพัฒนาแอป หน้าต่างเครื่องมือ แต่คุณอาจเรียกใช้โดยส่งคำขอไปที่หน้าพื้นหลังของส่วนขยาย ซึ่งคล้ายกับวิธีแสดงอยู่ในสคริปต์เนื้อหา

คุณสามารถใช้เมธอด devtools.panels.setOpenResourceHandler เพื่อติดตั้งฟังก์ชัน Callback ได้ ซึ่งจัดการคำขอเปิดทรัพยากรของผู้ใช้ (โดยทั่วไปจะเป็นการคลิกลิงก์ทรัพยากรในส่วน หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) เครื่องจัดการที่ติดตั้งส่วนใหญ่จะถูกเรียก ที่ผู้ใช้สามารถระบุ (โดยใช้ กล่องโต้ตอบการตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) การทำงานเริ่มต้นหรือส่วนขยายที่ใช้จัดการทรัพยากร คำขอที่เปิดอยู่ หากส่วนขยายโทร setOpenResourceHandler() หลายครั้ง เฉพาะ ตัวแฮนเดิลเดิมจะยังคงอยู่

ตัวอย่าง

โค้ดต่อไปนี้จะเพิ่มแผงที่อยู่ใน Panel.html ซึ่งแสดงด้วย FontPicker.png ใน แถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และติดป้ายกำกับเป็นเครื่องมือเลือกแบบอักษร

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

โค้ดต่อไปนี้จะเพิ่มแผงแถบด้านข้างที่มีอยู่ใน Sidebar.html และมีชื่อว่าคุณสมบัติแบบอักษรลงใน แผงองค์ประกอบ แล้วตั้งค่าความสูงเป็น 8ex ดังนี้

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

ภาพหน้าจอนี้แสดงให้เห็นถึงผลกระทบที่ตัวอย่างข้างต้นจะมีต่อหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

แผงไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง API แผงเครื่องมือสำหรับนักพัฒนาเว็บจาก chrome-extension-samples ที่เก็บได้

ประเภท

Button

ปุ่มที่สร้างโดยส่วนขยาย

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

onClicked

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อมีการคลิกปุ่ม

ฟังก์ชัน onClicked.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
อัปเดต

เป็นโมฆะ

อัปเดตแอตทริบิวต์ของปุ่ม หากละเว้นอาร์กิวเมนต์บางส่วนหรือ null แอตทริบิวต์ที่เกี่ยวข้องจะไม่อัปเดต

ฟังก์ชัน update มีลักษณะดังนี้
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  string ไม่บังคับ
  
  เส้นทางไปยังไอคอนใหม่ของปุ่ม
- tooltipText
  
  string ไม่บังคับ
  
  ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม
- ปิดอยู่
  
  บูลีน ไม่บังคับ
  
  ปุ่มปิดใช้งานหรือไม่

ElementsPanel

แสดงแผงองค์ประกอบ

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

onSelectionChanged

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อเลือกออบเจ็กต์ในแผง

ฟังก์ชัน onSelectionChanged.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
createSidebarPane

เป็นโมฆะ

สร้างแผงภายในแถบด้านข้างของแผง

ฟังก์ชัน createSidebarPane มีลักษณะดังนี้
```
(title: string, callback?: function) => {...}
```
- title
  
  สตริง
  
  ข้อความที่แสดงในคำบรรยายแทนเสียงของแถบด้านข้าง
- Callback
  
  ไม่บังคับ
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
(result: ExtensionSidebarPane) => void
```
  - ผลลัพธ์
    
    ExtensionSidebarPane
    
    ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น

ExtensionPanel

แสดงแผงที่สร้างโดยส่วนขยาย

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

onHidden

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อผู้ใช้ออกจากแผง

ฟังก์ชัน onHidden.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
onSearch

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อมีการดำเนินการค้นหา (การเริ่มการค้นหาใหม่ การไปยังส่วนต่างๆ ของผลการค้นหา และการค้นหาถูกยกเลิก)

ฟังก์ชัน onSearch.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
(action: string, queryString?: string) => void
```
  - การดำเนินการ
    
    สตริง
  - queryString
    
    string ไม่บังคับ
onShown

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อผู้ใช้เปลี่ยนไปใช้แผง

ฟังก์ชัน onShown.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
(window: Window) => void
```
  - หน้าต่าง
    
    หน้าต่าง
createStatusBarButton

เป็นโมฆะ

เพิ่มปุ่มต่อท้ายแถบสถานะของแผง

ฟังก์ชัน createStatusBarButton มีลักษณะดังนี้
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  สตริง
  
  เส้นทางไปยังไอคอนของปุ่ม ไฟล์ควรมีรูปภาพขนาด 64x24 พิกเซล ซึ่งประกอบด้วยไอคอนขนาด 32x24 จำนวน 2 ไอคอน ไอคอนด้านซ้ายจะถูกใช้เมื่อปุ่มไม่มีการใช้งาน ไอคอนทางขวาจะแสดงขึ้นเมื่อกดปุ่ม
- tooltipText
  
  สตริง
  
  ข้อความที่แสดงเป็นเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือปุ่ม
- ปิดอยู่
  
  boolean
  
  ปุ่มปิดใช้งานหรือไม่
- returns
  Button

ExtensionSidebarPane

แถบด้านข้างที่สร้างโดยส่วนขยาย

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

onHidden

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อแผงแถบด้านข้างถูกซ่อนไว้เนื่องจากผู้ใช้เปลี่ยนจากแผงที่โฮสต์แผงแถบด้านข้าง

ฟังก์ชัน onHidden.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
onShown

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อบานหน้าต่างแถบด้านข้างปรากฏขึ้นเมื่อผู้ใช้สลับไปยังแผงที่โฮสต์แผงนั้น

ฟังก์ชัน onShown.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
(window: Window) => void
```
  - หน้าต่าง
    
    หน้าต่าง
setExpression

เป็นโมฆะ

ตั้งค่านิพจน์ที่ได้รับการประเมินภายในหน้าที่ตรวจสอบ ผลลัพธ์จะแสดงในแผงแถบด้านข้าง

ฟังก์ชัน setExpression มีลักษณะดังนี้
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- นิพจน์
  
  สตริง
  
  นิพจน์ที่จะประเมินในบริบทของหน้าเว็บที่ตรวจสอบ ออบเจ็กต์ JavaScript และโหนด DOM แสดงอยู่ในแผนผังที่ขยายได้ซึ่งคล้ายกับคอนโซล/นาฬิกา
- rootTitle
  
  string ไม่บังคับ
  
  ชื่อที่ไม่บังคับสำหรับรากของต้นไม้นิพจน์
- Callback
  
  ไม่บังคับ
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
setHeight

เป็นโมฆะ

กำหนดความสูงของแถบด้านข้าง

ฟังก์ชัน setHeight มีลักษณะดังนี้
```
(height: string) => {...}
```
- ส่วนสูง
  
  สตริง
  
  ข้อกำหนดขนาดที่เหมือน CSS เช่น '100px' หรือ '12ex'
setObject

เป็นโมฆะ

ตั้งค่าออบเจ็กต์ที่สอดคล้องกับ JSON ที่จะแสดงในแผงแถบด้านข้าง

ฟังก์ชัน setObject มีลักษณะดังนี้
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  สตริง
  
  ออบเจ็กต์ที่จะแสดงในบริบทของหน้าเว็บที่ตรวจสอบ ประเมินในบริบทของผู้โทร (ไคลเอ็นต์ API)
- rootTitle
  
  string ไม่บังคับ
  
  ชื่อที่ไม่บังคับสำหรับรากของต้นไม้นิพจน์
- Callback
  
  ไม่บังคับ
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
setPage

เป็นโมฆะ

ตั้งค่าหน้า HTML ให้แสดงในแผงแถบด้านข้าง

ฟังก์ชัน setPage มีลักษณะดังนี้
```
(path: string) => {...}
```
- เส้นทาง
  
  สตริง
  
  เส้นทางที่เกี่ยวข้องของหน้าส่วนขยายที่จะแสดงภายในแถบด้านข้าง

SourcesPanel

แสดงแผงแหล่งที่มา

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

onSelectionChanged

เหตุการณ์<functionvoid>

เริ่มทำงานเมื่อเลือกออบเจ็กต์ในแผง

ฟังก์ชัน onSelectionChanged.addListener มีลักษณะดังนี้
```
(callback: function) => {...}
```
- Callback
  
  ฟังก์ชัน
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```
createSidebarPane

เป็นโมฆะ

สร้างแผงภายในแถบด้านข้างของแผง

ฟังก์ชัน createSidebarPane มีลักษณะดังนี้
```
(title: string, callback?: function) => {...}
```
- title
  
  สตริง
  
  ข้อความที่แสดงในคำบรรยายแทนเสียงของแถบด้านข้าง
- Callback
  
  ไม่บังคับ
  
  พารามิเตอร์ callback มีลักษณะดังนี้
```
(result: ExtensionSidebarPane) => void
```
  - ผลลัพธ์
    
    ExtensionSidebarPane
    
    ออบเจ็กต์ ExtensionSidebarPane สำหรับแผงแถบด้านข้างที่สร้างขึ้น

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

elements

แผงองค์ประกอบ

ประเภท

ElementsPanel

sources

แผงแหล่งที่มา

ประเภท

SourcesPanel

themeName

Chrome 59 ขึ้นไป

ชื่อของธีมสีที่ตั้งค่าในเครื่องมือสำหรับนักพัฒนาเว็บของผู้ใช้ ค่าที่เป็นไปได้ ได้แก่ default (ค่าเริ่มต้น) และ dark

ประเภท

สตริง

เมธอด

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

สร้างแผงส่วนขยาย

พารามิเตอร์

title

สตริง

ชื่อที่แสดงถัดจากไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
iconPath

สตริง

เส้นทางไอคอนของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย
pagePath

สตริง

เส้นทางหน้า HTML ของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย
Callback

ไม่บังคับ

พารามิเตอร์ callback มีลักษณะดังนี้
```
(panel: ExtensionPanel) => void
```
- แผง
  
  ExtensionPanel
  
  ออบเจ็กต์ ExtensionPanel ที่แสดงแผงที่สร้างขึ้น

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

ขอให้เครื่องมือสำหรับนักพัฒนาเว็บเปิด URL ในแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

พารามิเตอร์

URL

สตริง

URL ของทรัพยากรที่จะเปิด
lineNumber

ตัวเลข

ระบุหมายเลขบรรทัดที่จะเลื่อนเมื่อทรัพยากรโหลดขึ้นมา
columnNumber

หมายเลข ไม่บังคับ

Chrome 114 ขึ้นไป

ระบุหมายเลขคอลัมน์ที่จะเลื่อนเมื่อทรัพยากรโหลดขึ้นมา
Callback

ไม่บังคับ

พารามิเตอร์ callback มีลักษณะดังนี้
```
() => void
```

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

ระบุฟังก์ชันที่จะเรียกใช้เมื่อผู้ใช้คลิกลิงก์ทรัพยากรในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หากต้องการยกเลิกการตั้งค่าตัวแฮนเดิล ให้เรียกใช้เมธอดที่ไม่มีพารามิเตอร์หรือส่ง null เป็นพารามิเตอร์

พารามิเตอร์

Callback

ไม่บังคับ

พารามิเตอร์ callback มีลักษณะดังนี้
```
(resource: Resource) => void
```
- แหล่งข้อมูล
  
  แหล่งข้อมูล
  
  ออบเจ็กต์ devtools.inspectedWindow.Resource สำหรับทรัพยากรที่มีการคลิก