Gỡ lỗi tiện ích

Tiện ích có thể tận dụng những lợi ích gỡ lỗi tương tự mà Chrome DevTools 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 chuyên gia gỡ lỗi tiện ích, 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 xuất hiện lỗi. Hướng dẫn này giúp nhà phát triển hiểu rõ những kiến thức cơ bản về việc gỡ lỗi tiện ích.

Xác định vị trí nhật ký

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

Tập lệnh nền

Chuyển đến trang quản lý tiện ích trên 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 tệp chưa đóng gói) rồi chọn thư mục tiện ích bị hỏng. Sau khi tải tiện ích, tiện ích này 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 thấy một vấn đề trong tập lệnh nền.

Uncaught TypeError: Cannot read property 'addListener' of undefined

Ngoài ra, bạn có thể mở bảng điều khiển Chrome DevTools cho tập lệnh 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 khung 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 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 cùng 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 động đúng cách, 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 một 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 sẽ xuất hiện 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 các lỗi 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ên chèn tập lệnh nội dung ở đâu. 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 cùng bên phải, rồi 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, màu nền vẫn chưa thay đổi! Chuyển về Trang quản lý tiện ích và... không có nút Lỗi. Nguyên nhân có thể là do tập lệnh nội dung chạy bên trong trang web.

Mở bảng điều khiển Công cụ cho nhà phát triển của trang web mà tiện ích đang tìm cách 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 Công cụ cho nhà phát triển 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 rồi chọn tiện ích.

Lỗi này cho biết color chưa được xác định. Tiện ích này không được truyền biến một cách chính xác. Chỉnh sửa tập lệnh được 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 xuất hiện dưới dạng thẻ, chẳng hạn như trang ghi đè và các lựa 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 cần thiết trước khi ngay cả những nhà phát triển nhanh nhất có thể mở Công cụ cho nhà phát triển. Để 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 Công cụ cho nhà phát triển.

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à XMLHttpRequest nhiều nguồn gốc. 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 các quyền chính xác trong tệp kê khai.

  {
    "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ề việc gỡ lỗi các tiện ích, hãy xem phần Phát triển và gỡ lỗi. Tìm hiểu thêm về Chrome DevTools bằng cách đọc tài liệu.