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

Mở rộng Công cụ cho nhà phát triển

Các tiện ích trong Công cụ cho nhà phát triển bổ sung tính năng vào Công cụ của Chrome cho nhà phát triển bằng cách truy cập vào Công cụ cho nhà phát triển cụ thể các API tiện ích thông qua trang Công cụ cho nhà phát triển được thêm vào tiện ích.

Các API tiện ích dành riêng cho Công cụ cho nhà phát triển bao gồm:

Trang Công cụ cho nhà phát triển

Khi cửa sổ Công cụ cho nhà phát triển mở ra, tiện ích Công cụ cho nhà phát triển sẽ tạo một bản sao của trang Công cụ cho nhà phát triển tồn tại miễn là cửa sổ đang mở. Trang này có quyền truy cập vào API Công cụ cho nhà phát triển và API tiện ích, đồng thời có thể thực hiện các thao tác sau:

Tạo và tương tác với các bảng điều khiển bằng API devtools.panels, bao gồm cả việc thêm các trang tiện ích khác dưới dạng bảng điều khiển hoặc thanh bên vào cửa sổ Công cụ cho nhà phát triển.
Nhận thông tin về cửa sổ đã kiểm tra và đánh giá mã trong cửa sổ được kiểm tra bằng cách sử dụng Các API devtools.inspectedWindow.
Nhận thông tin về các yêu cầu mạng bằng API devtools.network.
Mở rộng bảng điều khiển Trình ghi bằng các API devtools.recorder.
Xem thông tin về trạng thái ghi của bảng Hiệu suất bằng các API devtools.performance.

Trang Công cụ cho nhà phát triển có thể truy cập trực tiếp vào các API tiện ích. Điều này bao gồm việc có thể để giao tiếp với trình chạy dịch vụ bằng cách sử dụng chuyển thông báo.

Tạo tiện ích Công cụ cho nhà phát triển

Để tạo trang Công cụ cho nhà phát triển cho tiện ích của bạn, hãy thêm trường devtools_page vào tiện ích tệp kê khai:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

Trường devtools_page phải trỏ đến trang HTML. Vì Công cụ cho nhà phát triển phải nằm cục bộ trên tiện ích của bạn, chúng tôi khuyên bạn chỉ định trang này bằng cách sử dụng URL tương đối.

Các thành phần của API chrome.devtools chỉ dùng được đối với các trang đã tải trong Công cụ cho nhà phát triển trong khi cửa sổ đó đang mở. Tập lệnh nội dung và các trang tiện ích khác không có quyền truy cập cho các API này.

Phần tử trên giao diện người dùng của Công cụ cho nhà phát triển: bảng điều khiển và ngăn thanh bên

Ngoài các thành phần giao diện người dùng mở rộng thông thường, chẳng hạn như thao tác trên trình duyệt, trình đơn theo bối cảnh và cửa sổ bật lên, Tiện ích Công cụ cho nhà phát triển có thể thêm các phần tử trên giao diện người dùng vào cửa sổ Công cụ cho nhà phát triển:

Bảng điều khiển là một thẻ ở cấp cao nhất, chẳng hạn như bảng điều khiển Phần tử, Nguồn và Mạng.
Ngăn thanh bên trình bày giao diện người dùng bổ sung liên quan đến một bảng điều khiển. Kiểu, Kiểu đã tính toán và Ngăn Trình xử lý sự kiện trên bảng điều khiển Phần tử là ví dụ về ngăn thanh bên. Tuỳ thuộc vào phiên bản Chrome bạn đang sử dụng và là nơi cửa sổ Công cụ cho nhà phát triển được gắn vào đế, các ngăn thanh bên của bạn có thể sẽ có dạng như hình ảnh ví dụ sau:

Cửa sổ Công cụ cho nhà phát triển hiển thị bảng điều khiển Phần tử và ngăn thanh bên Kiểu. — Cửa sổ DevTools hiện trên bảng điều khiển Phần tử và ngăn thanh bên Kiểu.

Mỗi bảng điều khiển là một tệp HTML riêng, có thể bao gồm các tài nguyên khác (JavaScript, CSS, hình ảnh, v.v. bật). Để tạo một bảng điều khiển cơ bản, hãy dùng mã sau:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

JavaScript được thực thi trong ngăn điều khiển hoặc ngăn thanh bên có quyền truy cập vào cùng các API như trang Công cụ cho nhà phát triển.

Để tạo ngăn thanh bên cơ bản, hãy sử dụng mã sau:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

Có một số cách để hiển thị nội dung trong ngăn thanh bên:

Nội dung HTML: Gọi setPage() để chỉ định một trang HTML cần hiển thị trong ngăn.
Dữ liệu JSON: Truyền một đối tượng JSON đến setObject().
Biểu thức JavaScript: Truyền một biểu thức vào setExpression(). DevTools đánh giá biểu thức trong ngữ cảnh của trang được kiểm tra, sau đó hiện giá trị trả về.

Đối với cả setObject() và setExpression(), ngăn này sẽ hiển thị giá trị như sẽ xuất hiện trong Bảng điều khiển Công cụ cho nhà phát triển. Tuy nhiên, setExpression() cho phép bạn hiển thị các phần tử DOM và JavaScript tuỳ ý trong khi setObject() chỉ hỗ trợ các đối tượng JSON.

Giao tiếp giữa các thành phần của tiện ích

Phần sau đây mô tả một số cách hữu ích để cho phép các thành phần tiện ích của Công cụ cho nhà phát triển giao tiếp với nhau.

Chèn tập lệnh nội dung

Để chèn một tập lệnh nội dung, hãy sử dụng scripting.executeScript():

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

Bạn có thể truy xuất mã thẻ của cửa sổ đã kiểm tra bằng cách sử dụng Thuộc tính inspectedWindow.tabId.

Nếu một tập lệnh nội dung đã được chèn vào trước đó, bạn có thể sử dụng API nhắn tin để giao tiếp với thiết bị đó.

Đánh giá JavaScript trong cửa sổ được kiểm tra

Bạn có thể dùng phương thức inspectedWindow.eval() để thực thi JavaScript trong ngữ cảnh của trang được kiểm tra. Bạn có thể gọi phương thức eval() từ trang Công cụ cho nhà phát triển, bảng điều khiển hoặc ngăn thanh bên.

Thận trọng: Chỉ sử dụng eval() nếu bạn cần truy cập vào nội dung JavaScript của trang được kiểm tra. Nếu không, bạn nên dùng phương thức scripting.executeScript() để chạy tập lệnh. Để biết thêm thông tin, hãy xem inspectedWindow.

Theo mặc định, biểu thức được đánh giá trong ngữ cảnh của khung chính của trang. inspectedWindow.eval() sử dụng cùng một bối cảnh và tuỳ chọn thực thi tập lệnh làm mã được nhập vào bảng điều khiển Công cụ cho nhà phát triển, cho phép truy cập vào Tiện ích bảng điều khiển của Công cụ cho nhà phát triển Các tính năng API khi sử dụng eval(). Ví dụ như hàm SOAK dùng để kiểm tra một phần tử:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

Bạn cũng có thể đặt useContentScriptContext thành true khi gọi inspectedWindow.eval() thành đánh giá biểu thức trong cùng ngữ cảnh với tập lệnh nội dung. Để dùng tuỳ chọn này, hãy dùng phần khai báo tập lệnh nội dung tĩnh trước khi gọi eval(), bằng cách gọi executeScript() hoặc chỉ định nội dung trong tệp manifest.json. Sau khi ngữ cảnh tập lệnh ngữ cảnh tải, bạn cũng có thể sử dụng tuỳ chọn này để chèn tập lệnh nội dung bổ sung.

Truyền phần tử đã chọn vào tập lệnh nội dung

Tập lệnh nội dung không có quyền truy cập trực tiếp vào phần tử hiện đã chọn. Tuy nhiên, bất kỳ mã nào bạn thực thi bằng inspectedWindow.eval() có quyền truy cập vào Công cụ cho nhà phát triển Console (API Tiện ích Bảng điều khiển) và API Tiện ích Console. Ví dụ: trong mã được đánh giá, bạn có thể sử dụng $0 để truy cập vào đã chọn.

Để chuyển phần tử đã chọn vào tập lệnh nội dung:

Tạo một phương thức trong tập lệnh nội dung để lấy phần tử đã chọn làm đối số.
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
Gọi phương thức từ trang Công cụ cho nhà phát triển bằng inspectedWindow.eval() bằng tuỳ chọn useContentScriptContext: true.
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

Tuỳ chọn useContentScriptContext: true chỉ định rằng biểu thức phải được đánh giá trong cùng ngữ cảnh như tập lệnh nội dung, để có thể truy cập vào phương thức setSelectedElement.

Lấy `window` của bảng tham chiếu

Để gọi postMessage() từ bảng điều khiển devtools, bạn cần tham chiếu đến đối tượng window của bảng đó. Nhận cửa sổ iframe của bảng điều khiển từ trình xử lý sự kiện panel.onShown:

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

Gửi thông báo từ các tập lệnh được chèn tới trang Công cụ cho nhà phát triển

Mã được chèn trực tiếp vào trang mà không có tập lệnh nội dung, bao gồm cả bằng cách thêm <script> hoặc gọi inspectedWindow.eval(), không thể gửi tin nhắn đến Trang Công cụ cho nhà phát triển sử dụng runtime.sendMessage(). Thay vào đó, bạn nên kết hợp tập lệnh chèn vào với một tập lệnh nội dung có thể đóng vai trò trung gian và sử dụng phương thức window.postMessage(). Ví dụ sau đây sử dụng tập lệnh nền từ phần trước:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

Bạn có thể tìm thấy các kỹ thuật truyền thông báo thay thế khác trên GitHub.

Phát hiện thời điểm mở và đóng Công cụ cho nhà phát triển

Để theo dõi xem cửa sổ Công cụ cho nhà phát triển có đang mở hay không, hãy thêm trình nghe onConnect vào trình chạy dịch vụ và gọi connect() từ trang Công cụ cho nhà phát triển. Bởi vì mỗi thẻ có thể mở cửa sổ Công cụ cho nhà phát triển riêng, bạn có thể nhận được nhiều sự kiện kết nối. Để theo dõi xem có cửa sổ Công cụ cho nhà phát triển nào đang mở hay không, hãy đếm các sự kiện kết nối và ngắt kết nối như minh hoạ trong ví dụ sau:

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

Trang Công cụ cho nhà phát triển tạo kết nối như sau:

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

Ví dụ về tiện ích cho Công cụ cho nhà phát triển

Ví dụ trên trang này đến từ các trang sau:

Tiện ích Polymer Devtools – Sử dụng nhiều trình trợ giúp chạy trong trang lưu trữ để truy vấn Trạng thái DOM/JS để gửi lại bảng điều khiển tuỳ chỉnh.
Tiện ích React Công cụ cho nhà phát triển – Sử dụng mô-đun con của trình kết xuất để sử dụng lại giao diện người dùng trong Công cụ cho nhà phát triển thành phần.
Trình kiểm tra Ember – Lõi tiện ích dùng chung có bộ chuyển đổi cho cả Chrome và Firefox.
Coquette-Inspect (Tiện ích rõ ràng dựa trên React) có một tác nhân gỡ lỗi được chèn vào trang lưu trữ.
Tiện ích mẫu có nhiều tiện ích đáng giá hơn để cài đặt, dùng thử và tìm hiểu .

Thông tin khác

Để biết thông tin về các API tiêu chuẩn mà tiện ích có thể sử dụng, hãy xem chrome.* API và web API.

Gửi ý kiến phản hồi cho chúng tôi! Nhận xét và đề xuất của bạn giúp chúng tôi cải thiện các API này.

Ví dụ

Bạn có thể xem các ví dụ sử dụng API Công cụ cho nhà phát triển trong phần Mẫu.

Mở rộng Công cụ cho nhà phát triển

Trang Công cụ cho nhà phát triển

Tạo tiện ích Công cụ cho nhà phát triển

Phần tử trên giao diện người dùng của Công cụ cho nhà phát triển: bảng điều khiển và ngăn thanh bên

Giao tiếp giữa các thành phần của tiện ích

Chèn tập lệnh nội dung

Đánh giá JavaScript trong cửa sổ được kiểm tra

Truyền phần tử đã chọn vào tập lệnh nội dung

Lấy window của bảng tham chiếu

Gửi thông báo từ các tập lệnh được chèn tới trang Công cụ cho nhà phát triển

Phát hiện thời điểm mở và đóng Công cụ cho nhà phát triển

Ví dụ về tiện ích cho Công cụ cho nhà phát triển

Thông tin khác

Ví dụ

Lấy `window` của bảng tham chiếu