Tiện ích gỡ lỗi

Các tiện ích có thể truy cập vào cùng Công cụ của Chrome cho nhà phát triển như các trang web. Để trở thành chuyên gia gỡ lỗi tiện ích, bạn cần biết cách tìm nhật ký và lỗi của các thành phần tiện ích khác nhau. Hướng dẫn này cung cấp các kỹ thuật cơ bản để gỡ lỗi tiện ích của bạn.

Trước khi bắt đầu

Hướng dẫn này giả định rằng bạn có kinh nghiệm phát triển web cơ bản. Bạn nên đọc Kiến thức cơ bản về phát triển để được giới thiệu về quy trình phát triển tiện ích. Giới thiệu về Thiết kế giao diện người dùng các phần tử giao diện có sẵn trong tiện ích.

Dừng tiện ích

Hướng dẫn này sẽ ngắt mỗi lần một thành phần tiện ích, sau đó minh hoạ cách khắc phục. Hãy nhớ huỷ các lỗi được nêu trong một phần trước khi chuyển sang phần tiếp theo. Bắt đầu bằng cách tải mẫu màu bị hỏng trên GitHub xuống.

Gỡ lỗi tệp kê khai

Trước tiên, hãy chia nhỏ tệp kê khai bằng cách thay đổi khoá "version" thành "versions":

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Bây giờ, hãy thử tải tiện ích cục bộ. Bạn sẽ nhìn thấy hộp thoại lỗi trỏ tới sự cố:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

Khi khoá tệp kê khai không hợp lệ, tiện ích sẽ không tải được nhưng Chrome sẽ gợi ý cho bạn cách khắc phục vấn đề.

Hãy huỷ thay đổi đó và nhập một quyền không hợp lệ để xem điều gì sẽ xảy ra. Thay đổi quyền "activeTab" thành "activetab" viết thường:

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Lưu tiện ích rồi thử tải lại. Lần này, trang web sẽ tải thành công. Trong phần mở rộng Bạn sẽ thấy ba nút: Chi tiết, Xoá và Lỗi. Lỗi nhãn của nút chuyển sang màu đỏ khi có lỗi. Nhấp vào nút Lỗi để xem lỗi sau:

Permission 'activetab' is unknown or URL pattern is malformed.

Trước khi tiếp tục, hãy thay đổi lại quyền, nhấp vào Xoá tất cả ở góc trên bên phải để xoá nhật ký rồi tải lại tiện ích.

Gỡ lỗi trình chạy dịch vụ

Tìm nhật ký

Trình chạy dịch vụ đặt màu mặc định thành bộ nhớ và ghi lại màu đó vào bảng điều khiển. Để xem nhật ký này, hãy mở bảng điều khiển Công cụ của Chrome cho nhà phát triển bằng cách chọn đường liên kết màu xanh dương bên cạnh Kiểm tra chế độ xem.

Lỗi định vị

Hãy ngắt trình chạy dịch vụ này bằng cách thay đổi onInstalled thành oninstalled viết thường:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

Làm mới rồi nhấp vào Lỗi để xem nhật ký lỗi. Lỗi đầu tiên cho bạn biết rằng trình chạy dịch vụ không đăng ký được. Điều này có nghĩa là đã xảy ra lỗi trong khi bắt đầu:

Service worker registration failed. Status code: 15.

Lỗi thực tế xuất hiện sau:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

Hoàn tác lỗi chúng tôi đã đưa ra, nhấp vào Xóa tất cả ở góc trên bên phải rồi tải lại tiện ích.

Kiểm tra trạng thái của trình chạy dịch vụ

Bạn có thể xác định thời điểm trình chạy dịch vụ thức dậy để thực hiện tác vụ bằng cách làm theo các bước sau:

1. Sao chép mã tiện ích ở phía trên mục "Kiểm tra chế độ xem".

   

2. Mở tệp kê khai trong trình duyệt. Ví dụ: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. Kiểm tra tệp.
4. Chuyển đến bảng điều khiển Application (Ứng dụng).
5. Chuyển đến ngăn Service Workers.

Để kiểm tra mã của bạn, hãy bắt đầu hoặc dừng trình chạy dịch vụ bằng cách sử dụng các đường liên kết bên cạnh trạng thái.

Ngoài ra, nếu bạn đã thực hiện thay đổi đối với mã trình chạy dịch vụ, bạn có thể nhấp vào Cập nhật hoặc skipPending để áp dụng các thay đổi ngay lập tức.

Gỡ lỗi cửa sổ bật lên

Bây giờ, tiện ích đã khởi chạy đúng cách, hãy ngắt cửa sổ bật lên bằng cách nhận xét các dòng được đánh dấu bên dưới:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

Quay lại trang Quản lý tiện ích. Nút Errors (Lỗi) xuất hiện lại. Nhấp để xem nhật ký mới. Nó hiển thị thông báo lỗi sau:

Uncaught ReferenceError: tabs is not defined

Bạn có thể mở Công cụ cho nhà phát triển của 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 này không biết nơi chèn tập lệnh nội dung vào. Hãy khắc phục sự cố này bằng cách gọi tabs.query(), sau đó chọn thẻ đang hoạt động.

Để cập nhật mã, hãy nhấp vào nút Xoá tất cả ở góc trên bên phải rồi tải lại tiện ích.

Gỡ lỗi tập lệnh nội dung

Bây giờ, hãy phá vỡ tập lệnh nội dung bằng cách thay đổi biến "color" thành "colors":

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

Làm mới trang, mở cửa sổ bật lên và nhấp vào hộp màu xanh lục. Không có gì xảy ra cả.

Nếu bạn truy cập trang Quản lý tiện ích, nút Lỗi sẽ không xuất hiện. Điều này là do chỉ có lỗi thời gian chạy, console.warning và console.error được ghi lại trên trang Quản lý tiện ích.

Tập lệnh nội dung chạy bên trong trang web. Vì vậy, để tìm những lỗi này, chúng ta phải kiểm tra trang web mà tiện ích đang cố thay đổi:

Uncaught ReferenceError: colors is not defined

Để 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 mục trên cùng rồi chọn tiện ích.

Thông báo lỗi cho biết colors không được xác định. Phần mở rộng này không được truyền biến đúng cách. Chỉnh sửa tập lệnh được chèn để chuyển biến màu vào mã.

Giám sát các yêu cầu mạng

Cửa sổ bật lên thường thực hiện tất cả các yêu cầu mạng cần thiết trước cả những yêu cầu 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. Nó 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ột số API tiện ích yêu cầu quyền. Hãy tham khảo bài viết về quyền và Chrome API để đảm bảo một tiện ích đang yêu cầu đúng quyền trong tệp kê khai.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Tài liệu đọc thêm

Hãy đọc tài liệu để tìm hiểu thêm về Công cụ của Chrome cho nhà phát triển.