Các tiện ích có thể tận dụng những 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 chính, bạn phải 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à vị trí phát hiện lỗi. Hướng dẫn này cung cấp cho nhà phát triển hiểu biết cơ bản về tiện ích gỡ lỗi.
Xác định vị trí nhật ký
Tiện ích được tạo thành từ nhiều thành phần và các thành phần này có những trách nhiệm riêng. Tải một tiện ích bị lỗi xuống tại đây để bắt đầu tìm nhật ký lỗi cho nhiều thành phần tiện ích.
Tập lệnh nền
Chuyển đến trang quản lý tiện ích của Chrome tại chrome://extensions và đảm bảo rằng bạn đã bật chế độ nhà phát triển. Nhấp vào nút Load Unpacked (Tải gói giải nén) rồi chọn thư mục tiện ích bị hỏng. Sau khi được tải, tiện ích sẽ có 3 nút: Details (Chi tiết), Remove (Xoá) và Errors (Lỗi) được viết bằng các chữ cái màu đỏ.
Nhấp vào nút Errors (Lỗi) để xem nhật ký lỗi. Hệ thống tiện ích đã phát hiện 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 Công cụ của Chrome cho nhà phát triển 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 mục 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. Hãy cập nhật mã để phản ánh đúng lệnh gọi, 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.
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. Hãy làm mới trang này hoặc mở một thẻ mới và chuyển đến trang bất kỳ trên developer.chrome.com, mở cửa sổ bật lên và 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 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 vị trí để chèn tập lệnh nội dung.
Bạn có thể sửa lỗi 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 Clear all (Xoá tất cả) ở góc trên 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, nền vẫn chưa đổi màu! Quay lại Trang quản lý tiện ích và... không có nút Errors (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 Công cụ cho nhà phát triển 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 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 và chọn tiện ích.
Thông báo lỗi cho biết color chưa được xác định. Phần mở rộng không được truyền biến đúng cách.
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 hiển thị dưới dạng thẻ, chẳng hạn như ghi đè trang và tuỳ chọn toàn trang, trong bảng điều khiển của trang web và trên trang quản lý tiện ích.
Giám sát các yêu cầu mạng
Cửa sổ bật lên thường sẽ tạo tất cả các yêu cầu mạng cần thiết trước khi 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. Phương thức này 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ặc dù tiện ích có khả năng tương tự như trang web, nhưng các tiện ích thường cần 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 trên nhiều nguồn gốc. Hãy tham khảo bài viết về quyền và API Chrome hiện có để đả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",
"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 nội dung Phát triển và gỡ lỗi. Tìm hiểu thêm về Công cụ cho nhà phát triển của Chrome bằng cách đọc tài liệu.