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

chrome.devtools.panels

คำอธิบาย

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

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

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

ดูสรุปเกี่ยวกับ DevTools API เพื่อดูข้อมูลเบื้องต้นทั่วไปเกี่ยวกับการใช้ DevTools API

ไฟล์ Manifest

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

"devtools_page"

ตัวอย่าง

โค้ดต่อไปนี้จะเพิ่มแผงที่อยู่ใน 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");
  }
);

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

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

หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง devtools panels API จากที่เก็บchrome-extension-samples

ประเภท

Button

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

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

onClicked

Event<functionvoidvoid>

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

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

โมฆะ

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

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

ElementsPanel

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

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

onSelectionChanged

Event<functionvoidvoid>

เรียกใช้เมื่อมีการเลือกวัตถุในแผง

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

โมฆะ

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

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

ExtensionPanel

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

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

onHidden

Event<functionvoidvoid>

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

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

Event<functionvoidvoid>

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

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

Event<functionvoidvoid>

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

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

โมฆะ

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

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

ExtensionSidebarPane

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

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

onHidden

Event<functionvoidvoid>

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

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

Event<functionvoidvoid>

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

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

โมฆะ

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

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

โมฆะ

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

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

โมฆะ

ตั้งค่าออบเจ็กต์ที่เป็นไปตามข้อกำหนด JSON เพื่อแสดงในแผงแถบด้านข้าง

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

โมฆะ

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

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

SourcesPanel

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

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

onSelectionChanged

Event<functionvoidvoid>

เรียกใช้เมื่อมีการเลือกวัตถุในแผง

ฟังก์ชัน 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 สำหรับทรัพยากรที่มีการคลิก