Trang này được dịch bởi Cloud Translation API.

chrome.devtools.panels

Mô tả

Sử dụng API chrome.devtools.panels để tích hợp tiện ích của bạn vào giao diện người dùng cửa sổ Công cụ cho nhà phát triển: tạo bảng điều khiển của riêng bạn, truy cập vào bảng điều khiển hiện có và thêm thanh bên.

Mỗi bảng điều khiển tiện ích và thanh bên được hiển thị dưới dạng trang HTML riêng biệt. Đã hiển thị tất cả các trang tiện ích trong cửa sổ Công cụ dành cho nhà phát triển có quyền truy cập vào tất cả các phần của API chrome.devtools, cũng như tất cả các API tiện ích khác.

Bạn có thể sử dụng phương thức devtools.panels.setOpenResourceHandler để cài đặt một hàm callback xử lý các yêu cầu mở tài nguyên của người dùng (thường là nhấp vào một liên kết tài nguyên trong cửa sổ Công cụ dành cho nhà phát triển). Tối đa một trong các trình xử lý đã cài đặt được gọi; người dùng có thể chỉ định (sử dụng hộp thoại Cài đặt công cụ dành cho nhà phát triển) hành vi mặc định hoặc tiện ích để xử lý tài nguyên yêu cầu chưa được xử lý. Nếu một tiện ích gọi setOpenResourceHandler() nhiều lần, thì chỉ lần gọi gần đây nhất trình xử lý sẽ được giữ lại.

Xem Tóm tắt API Công cụ cho nhà phát triển để biết giới thiệu chung về cách sử dụng API Công cụ dành cho nhà phát triển.

Tệp kê khai

Bạn phải khai báo các khoá sau trong tệp kê khai để sử dụng API này.

"devtools_page"

Ví dụ:

Mã sau đây sẽ thêm một bảng điều khiển có trong Panel.html, được biểu thị bằng FontPicker.png trên Thanh công cụ của Công cụ dành cho nhà phát triển và được gắn nhãn là Công cụ chọn phông chữ:

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

Mã sau đây sẽ thêm một ngăn thanh bên nằm trong Sidebar.html và có tiêu đề Font Properties vào bảng điều khiển Phần tử, sau đó đặt chiều cao của bảng điều khiển thành 8ex:

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

Ảnh chụp màn hình minh hoạ tác động của ví dụ này đối với cửa sổ Công cụ cho nhà phát triển:

Bảng điều khiển biểu tượng tiện ích trên thanh công cụ của Công cụ cho nhà phát triển.

Để dùng thử API này, hãy cài đặt ví dụ về API bảng điều khiển dành cho nhà phát triển trong chrome-extension-samples kho lưu trữ.

Loại

Button

Một nút do tiện ích tạo.

Thuộc tính

onClicked

Sự kiện<functionvoidvoid>

Được kích hoạt khi người dùng nhấp vào nút này.

Hàm onClicked.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
cập nhật

void

Cập nhật các thuộc tính của nút này. Nếu một số đối số bị bỏ qua hoặc null, các thuộc tính tương ứng sẽ không được cập nhật.

Hàm update có dạng như sau:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  chuỗi không bắt buộc
  
  Đường dẫn đến biểu tượng mới của nút.
- tooltipText
  
  chuỗi không bắt buộc
  
  Văn bản sẽ xuất hiện dưới dạng chú giải công cụ khi người dùng di chuột qua nút này.
- đã vô hiệu
  
  boolean không bắt buộc
  
  Liệu nút này có bị tắt hay không.

ElementsPanel

Đại diện cho bảng điều khiển Phần tử.

Thuộc tính

onSelectionChanged

Sự kiện<functionvoidvoid>

Được kích hoạt khi một đối tượng được chọn trong bảng điều khiển.

Hàm onSelectionChanged.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
createSidebarPane

void

Tạo một ngăn bên trong thanh bên của bảng điều khiển.

Hàm createSidebarPane có dạng như sau:
```
(title: string, callback?: function) => {...}
```
- tiêu đề
  
  string
  
  Văn bản hiển thị trong chú thích thanh bên.
- số gọi lại
  
  hàm không bắt buộc
  
  Tham số callback sẽ có dạng như sau:
```
(result: ExtensionSidebarPane) => void
```
  - kết quả
    
    ExtensionSidebarPane
    
    Đối tượng Tiện ích thanh bênPane cho ngăn thanh bên đã tạo.

ExtensionPanel

Đại diện cho một bảng điều khiển do tiện ích tạo.

Thuộc tính

onHidden

Sự kiện<functionvoidvoid>

Được kích hoạt khi người dùng rời khỏi bảng điều khiển.

Hàm onHidden.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
onSearch

Sự kiện<functionvoidvoid>

Được kích hoạt khi có một hành động tìm kiếm (bắt đầu một lượt tìm kiếm mới, thao tác điều hướng trong kết quả tìm kiếm hoặc lượt tìm kiếm bị hủy).

Hàm onSearch.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
(action: string, queryString?: string) => void
```
  - hành động
    
    string
  - queryString
    
    chuỗi không bắt buộc
onShown

Sự kiện<functionvoidvoid>

Được kích hoạt khi người dùng chuyển sang bảng điều khiển.

Hàm onShown.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
(window: Window) => void
```
  - cửa sổ
    
    Cửa sổ
createStatusBarButton

void

Thêm một nút vào thanh trạng thái của bảng điều khiển.

Hàm createStatusBarButton có dạng như sau:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  string
  
  Đường dẫn đến biểu tượng của nút. Tệp phải chứa hình ảnh 64x24 pixel bao gồm hai biểu tượng 32x24. Biểu tượng bên trái được dùng khi nút này không hoạt động; biểu tượng bên phải sẽ xuất hiện khi người dùng nhấn nút này.
- tooltipText
  
  string
  
  Văn bản sẽ xuất hiện dưới dạng chú thích khi người dùng di chuột qua nút này.
- đã vô hiệu
  
  boolean
  
  Liệu nút này có bị tắt hay không.
- returns
  Button

ExtensionSidebarPane

Một thanh bên do tiện ích tạo.

Thuộc tính

onHidden

Sự kiện<functionvoidvoid>

Được kích hoạt khi ngăn thanh bên bị ẩn do người dùng rời khỏi bảng điều khiển lưu trữ ngăn thanh bên.

Hàm onHidden.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
onShown

Sự kiện<functionvoidvoid>

Được kích hoạt khi ngăn thanh bên hiển thị do người dùng chuyển sang bảng điều khiển lưu trữ ngăn này.

Hàm onShown.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
(window: Window) => void
```
  - cửa sổ
    
    Cửa sổ
setExpression

void

Đặt một biểu thức được đánh giá trong trang được kiểm tra. Kết quả sẽ được hiển thị trong ngăn thanh bên.

Hàm setExpression có dạng như sau:
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- biểu thức
  
  string
  
  Biểu thức sẽ được đánh giá trong ngữ cảnh của trang được kiểm tra. Các đối tượng JavaScript và nút DOM được hiển thị trong cây có thể mở rộng, tương tự như bảng điều khiển/đồng hồ.
- rootTitle
  
  chuỗi không bắt buộc
  
  Tiêu đề không bắt buộc cho gốc của cây biểu thức.
- số gọi lại
  
  hàm không bắt buộc
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
setHeight

void

Đặt chiều cao của thanh bên.

Hàm setHeight có dạng như sau:
```
(height: string) => {...}
```
- độ cao
  
  string
  
  Thông số kích thước giống CSS, chẳng hạn như '100px' hoặc '12ex'.
setObject

void

Thiết lập để một đối tượng tuân thủ JSON hiển thị trong ngăn thanh bên.

Hàm setObject có dạng như sau:
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  string
  
  Đối tượng sẽ xuất hiện trong ngữ cảnh của trang được kiểm tra. Được đánh giá trong bối cảnh của phương thức gọi (ứng dụng API).
- rootTitle
  
  chuỗi không bắt buộc
  
  Tiêu đề không bắt buộc cho gốc của cây biểu thức.
- số gọi lại
  
  hàm không bắt buộc
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
setPage

void

Đặt một trang HTML hiển thị trong ngăn thanh bên.

Hàm setPage có dạng như sau:
```
(path: string) => {...}
```
- đường dẫn
  
  string
  
  Đường dẫn tương đối của một trang tiện ích sẽ hiển thị trong thanh bên.

SourcesPanel

Đại diện cho bảng điều khiển Nguồn.

Thuộc tính

onSelectionChanged

Sự kiện<functionvoidvoid>

Được kích hoạt khi một đối tượng được chọn trong bảng điều khiển.

Hàm onSelectionChanged.addListener có dạng như sau:
```
(callback: function) => {...}
```
- số gọi lại
  
  hàm
  
  Tham số callback sẽ có dạng như sau:
```
() => void
```
createSidebarPane

void

Tạo một ngăn bên trong thanh bên của bảng điều khiển.

Hàm createSidebarPane có dạng như sau:
```
(title: string, callback?: function) => {...}
```
- tiêu đề
  
  string
  
  Văn bản hiển thị trong chú thích thanh bên.
- số gọi lại
  
  hàm không bắt buộc
  
  Tham số callback sẽ có dạng như sau:
```
(result: ExtensionSidebarPane) => void
```
  - kết quả
    
    ExtensionSidebarPane
    
    Đối tượng Tiện ích thanh bênPane cho ngăn thanh bên đã tạo.

Thuộc tính

elements

Bảng điều khiển Phần tử.

Loại

ElementsPanel

sources

Bảng điều khiển Nguồn.

Loại

SourcesPanel

themeName

Chrome 59 trở lên

Tên của giao diện màu được đặt trong chế độ cài đặt Công cụ cho nhà phát triển của người dùng. Các giá trị có thể là: default (mặc định) và dark.

Loại

string

Phương thức

create()

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

Tạo một bảng điều khiển tiện ích.

Tham số

tiêu đề

string

Tiêu đề được hiển thị bên cạnh biểu tượng tiện ích trên thanh công cụ Công cụ dành cho nhà phát triển.
iconPath

string

Đường dẫn của biểu tượng bảng điều khiển tương ứng với thư mục tiện ích.
pagePath

string

Đường dẫn của trang HTML của bảng điều khiển so với thư mục tiện ích.
số gọi lại

hàm không bắt buộc

Tham số callback sẽ có dạng như sau:
```
(panel: ExtensionPanel) => void
```
- bảng
  
  ExtensionPanel
  
  Đối tượng Extension Panel đại diện cho bảng điều khiển đã tạo.

openResource()

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

Yêu cầu Công cụ cho nhà phát triển mở một URL trong bảng điều khiển Công cụ cho nhà phát triển.

Tham số

url

string

URL của tài nguyên cần mở.
lineNumber

số

Chỉ định số dòng để cuộn đến khi tài nguyên được tải.
columnNumber

số không bắt buộc

Chrome 114 trở lên

Chỉ định số cột để cuộn đến khi tài nguyên được tải.
số gọi lại

hàm không bắt buộc

Tham số callback sẽ có dạng như sau:
```
() => void
```

setOpenResourceHandler()

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

Chỉ định hàm được gọi khi người dùng nhấp vào đường liên kết tài nguyên trong cửa sổ Công cụ dành cho nhà phát triển. Để huỷ đặt trình xử lý, hãy gọi phương thức không có tham số hoặc truyền giá trị rỗng dưới dạng tham số.

Tham số

số gọi lại

hàm không bắt buộc

Tham số callback sẽ có dạng như sau:
```
(resource: Resource) => void
```
- tài nguyên
  
  Tài nguyên
  
  Đối tượng devtools.inspectedWindow.Resource cho tài nguyên đã được nhấp vào.