Gỡ lỗi tiện ích

Tiện ích có thể tận dụng các lợi ích gỡ lỗi tương tự mà Công cụ của Chrome cho nhà phát triển cung cấp cho các trang web, nhưng chúng có các thuộc tính hành vi riêng biệt. Để trở thành một trình gỡ lỗi tiện ích thành thạo, bạn cần hiểu rõ những hành vi này, cách các thành phần tiện ích hoạt động với nhau và nơi phát hiện lỗi. Hướng dẫn này giúp nhà phát triển hiểu được kiến thức cơ bản về các tiện ích gỡ lỗi.

Tìm nhật ký

Tiện ích được tạo thành từ nhiều thành phần khác nhau và các thành phần này có trách nhiệm riêng. Tải một tiện ích bị hỏng tại đây để bắt đầu tìm nhật ký lỗi cho các thành phần tiện ích khác nhau.

Tập lệnh trong nền

Chuyển đến trang quản lý tiện ích Chrome tại chrome://extensions và đảm bảo chế độ nhà phát triển đang bật. Nhấp vào nút Load Unpacked (Tải chưa giải nén) rồi chọn thư mục phần mở rộng bị hỏng. Sau khi tải, tiện ích sẽ có 3 nút: Details (Chi tiết), Remove (Xoá) và Errors (Lỗi) bằng chữ màu đỏ.

Nhấp vào nút Lỗi để xem nhật ký lỗi. Hệ thống tiện ích đã phát hiện vấn đề trong tập lệnh ở chế độ nền.

Uncaught TypeError: Cannot read property 'addListener' of undefined

Ngoài ra, bạn có thể mở bảng điều khiển Công cụ của Chrome cho nhà phát triển cho tập lệnh trong nền bằng cách chọn đường liên kết màu xanh dương bên cạnh Kiểm tra thành phần hiển thị.

Quay lại mã.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Tập lệnh trong nền đang cố gắng theo dõi sự kiện onInstalled, nhưng tên thuộc tính yêu cầu chữ "I" viết hoa. Cập nhật mã để phản ánh lệnh gọi chính xác, nhấp vào nút Xoá tất cả ở góc trên bên phải, sau đó tải lại tiện ích.

Cửa sổ bật lên

Giờ đây, khi tiện ích khởi chạy chính xác, bạn có thể kiểm thử các thành phần khác. Làm mới trang này hoặc mở một thẻ mới rồi chuyển đến trang bất kỳ trên developer.chrome.com, mở cửa sổ bật lên rồi nhấp vào hình vuông màu xanh lục. Và... không có gì xảy ra.

Quay lại Trang quản lý tiện ích, nút Lỗi đã xuất hiện trở lại. Nhấp vào đó để xem nhật ký mới.

Uncaught ReferenceError: tabs is not defined

Bạn cũng có thể xem lỗi cửa sổ bật lên bằng cách kiểm tra cửa sổ bật lên.

Lỗi tabs is undefined cho biết tiện ích không biết nơi chèn tập lệnh nội dung. Bạn có thể khắc phục vấn đề này bằng cách gọi phương thức tabs.query(), sau đó chọn thẻ đang hoạt động.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

Cập nhật mã, nhấp vào nút Xoá tất cả ở góc trên bên phải, sau đó tải lại tiện ích.

Tập lệnh nội dung

Làm mới trang, mở cửa sổ bật lên rồi nhấp vào hộp màu xanh lục. Và... không, nền vẫn chưa thay đổi màu! Quay lại Trang quản lý tiện ích và... không có nút Lỗi. Nguyên nhân có thể là tập lệnh nội dung chạy bên trong trang web.

Mở bảng điều khiển DevTools của trang web mà tiện ích đang cố gắng thay đổi.

Chỉ các lỗi thời gian chạy, console.warning và console.error mới được ghi lại trên Trang quản lý tiện ích.

Để sử dụng DevTools trong tập lệnh nội dung, hãy nhấp vào mũi tên thả xuống bên cạnh top (trên cùng) rồi chọn phần mở rộng.

Lỗi cho biết color chưa được xác định. Tiện ích không được truyền biến chính xác. Sửa tập lệnh đã chèn để truyền biến màu vào mã.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

Thẻ tiện ích

Bạn có thể tìm thấy nhật ký cho các trang tiện ích hiển thị dưới dạng thẻ, chẳng hạn như các trang ghi đè và các tuỳ chọn toàn trang, trong bảng điều khiển trang web và trên trang quản lý tiện ích.

Theo dõi các yêu cầu mạng

Cửa sổ bật lên thường sẽ thực hiện tất cả các yêu cầu mạng bắt buộc trước khi ngay cả những nhà phát triển nhanh nhất cũng có thể mở DevTools. Để xem các yêu cầu này, hãy làm mới từ bên trong bảng điều khiển mạng. Thao tác này sẽ tải lại cửa sổ bật lên mà không đóng bảng điều khiển DevTools.

Khai báo quyền

Mặc dù có các chức năng tương tự như trang web, nhưng các tiện ích thường cần có quyền sử dụng một số tính năng nhất định, chẳng hạn như cookie, bộ nhớ và XMLHttpRequsts nhiều nguồn gốc. Hãy tham khảo bài viết về quyền và các API Chrome hiện có để đảm bảo tiện ích đang yêu cầu quyền chính xác trong manifest.

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

Các bước tiếp theo

Để biết thêm thông tin về cách gỡ lỗi tiện ích, hãy xem phần Phát triển và gỡ lỗi. Tìm hiểu thêm về Công cụ của Chrome cho nhà phát triển bằng cách đọc tài liệu.