Các tiện ích có thể truy cập vào cùng một Công cụ của Chrome cho nhà phát triển như trang web. Để trở thành chuyên gia về 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 bài viết Kiến thức cơ bản về quy trình phát triển để biết thông tin giới thiệu về quy trình phát triển tiện ích. Bài viết Thiết kế giao diện người dùng giới thiệu cho bạn về các thành phần giao diện người dùng có trong tiện ích.
Tách phần mở rộng
Hướng dẫn này sẽ chia từng thành phần tiện ích một, sau đó minh hoạ cách khắc phục. Hãy nhớ hoàn tác các lỗi được giới thiệu trong một phần trước khi tiếp tục chuyển sang phần tiếp theo. Hãy bắt đầu bằng cách tải mẫu Màu bị hỏng trên GitHub.
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ẽ thấy một 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. Tuy nhiên, Chrome sẽ cung cấp cho bạn gợi ý về cách khắc phục vấn đề này.
Hãy huỷ thay đổi đó và nhập quyền không hợp lệ để xem điều gì sẽ xảy ra.
Thay đổi quyền "activeTab" thành "activetab" chữ 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 tệp sẽ tải thành công. Trong trang Quản lý tiện ích, bạn sẽ thấy 3 nút: Chi tiết, Xoá và Lỗi. Nhãn nút Lỗi sẽ chuyển sang màu đỏ khi xảy ra 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 của bạ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ụ
Định vị nhật ký
Service worker đặt màu mặc định thành lưu trữ và ghi nhật ký 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 mục Kiểm tra chế độ xem.
Lỗi định vị
Hãy ngừng một trình chạy dịch vụ 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 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 quá trình khởi tạo:
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')
Huỷ lỗi chúng tôi đã đưa ra, rồi nhấp vào Xoá 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 các tác vụ bằng cách làm theo các bước sau:
- Sao chép mã tiện ích nằm ở phía trên "Kiểm tra khung hiển thị".
Mã tiện ích trong trang Quản lý tiện ích. - Mở tệp kê khai của bạn trong trình duyệt. Ví dụ:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json - Kiểm tra tệp.
- Chuyển đến bảng điều khiển Application (Ứng dụng).
- Chuyển đến ngăn Service Worker (Trình chạy dịch vụ).
Để kiểm thử mã, hãy khởi động hoặc dừng trình chạy dịch vụ bằng các đường liên kết bên cạnh status.
Ngoài ra, nếu đã thực hiện các thay đổi đối với mã trình chạy dịch vụ, bạn có thể nhấp vào Update (Cập nhật) hoặc skipWait để áp dụng các thay đổi ngay lập tức.
Gỡ lỗi cửa sổ bật lên
Giờ đây, khi tiện ích này khởi chạy chính xác, hãy đóng cửa sổ bật lên bằng cách đánh dấu 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 Lỗi sẽ xuất hiện lại. Nhấp vào đó để 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 không biết vị trí để chèn tập lệnh nội dung.
Hãy sửa lỗi 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 Clear all (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 rồi 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á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.
Tập lệnh nội dung chạy bên trong một trang web. Vì vậy, để tìm ra những lỗi này, chúng ta phải kiểm tra trang web mà tiện ích đang cố gắng thay đổi:
Uncaught ReferenceError: colors is not defined
Để sử dụng Công cụ cho nhà phát triển từ 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 trên cùng rồi chọn tiện ích.
Lỗi cho biết colors 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ã.
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 khi cả những nhà phát triển nhanh nhất có thể mở Công cụ cho nhà phát triển. Để xem những yêu cầu này, hãy làm mới từ bên trong bảng điều khiển mạng. Hệ thống sẽ tải lại cửa sổ bật lên mà không cần đó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 cấp quyền. Tham khảo bài viết về quyền và API Chrome để đảm bảo một tiện ích đang yêu cầu cấp quyền chính xác trong tệp kê khai.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Tài liệu đọc thêm
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.