לתוספים יש אפשרות להשתמש באותם יתרונות לניפוי באגים שכלי הפיתוח של Chrome מספקים לדפי אינטרנט, אבל יש להם מאפייני התנהגות ייחודיים. כדי שתוכלו להשתמש בכלי הראשי לניפוי באגים מתוספים, צריך להבין את ההתנהגויות האלה, איך רכיבי התוסף פועלים זה עם זה ואיפה צריך למקם את הבאגים. המדריך הזה מספק למפתחים הבנה בסיסית בתחום ניפוי הבאגים בתוספים.
איתור היומנים
התוספים מורכבים מהרבה רכיבים שונים, ולרכיבים האלה יש תחומי אחריות נפרדים. כאן אפשר להוריד תוסף לא תקין כדי להתחיל לאתר יומני שגיאות של רכיבי תוסף שונים.
סקריפט רקע
עוברים לדף הניהול של התוספים ל-Chrome בכתובת chrome://extensions ומוודאים שמצב הפיתוח מופעל. לוחצים על הלחצן Load Unpacked ובוחרים את ספריית התוספים הפוכה. אחרי שהתוסף נטען, יופיעו בו שלושה לחצנים: Details, Remove ו-Errors באותיות אדומות.
לוחצים על הלחצן שגיאות כדי להציג את יומן השגיאות. מערכת התוספים זיהתה בעיה בסקריפט הרקע.
Uncaught TypeError: Cannot read property 'addListener' of undefined
בנוסף, אפשר לפתוח את החלונית של כלי הפיתוח ל-Chrome כדי להשתמש בסקריפט הרקע על ידי לחיצה על הקישור הכחול שמופיע ליד Inspect views.
חוזרים אל הקוד.
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()]
}]);
});
});
סקריפט הרקע מנסה להאזין לאירוע onInstalled, אבל שם המאפיין מחייב אות I. צריך לעדכן את הקוד כך שישקף את השיחה הנכונה, ללחוץ על הלחצן Clear
all (ניקוי הכול) בפינה הימנית העליונה ואז לטעון מחדש את התוסף.
פריט קופץ
עכשיו, אחרי שהתוסף מופעל כמו שצריך, אפשר לבדוק רכיבים אחרים. רענן את הדף או פתח כרטיסייה חדשה ונווט לדף כלשהו ב-developer.chrome.com, פתח את החלון הקופץ ולחץ על הריבוע הירוק. ו... לא קורה כלום.
חוזרים לדף ניהול התוספים. הלחצן שגיאות הופיע שוב. לחצו עליו כדי להציג את היומן החדש.
Uncaught ReferenceError: tabs is not defined
ניתן להציג שגיאות של חלונות קופצים גם על ידי בדיקת החלון הקופץ.
בשגיאה, tabs is undefined, כתוב שהתוסף לא יודע לאן להחדיר את סקריפט התוכן.
כדי לתקן זאת, מפעילים את השיטה tabs.query() ובוחרים בכרטיסייה הפעילה.
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;'});
});
};
תצטרכו לעדכן את הקוד, ללחוץ על הלחצן Clear all (ניקוי הכול) בפינה הימנית העליונה ואז לטעון מחדש את התוסף.
סקריפט תוכן
רענן את הדף, פתח את החלון הקופץ ולחץ על התיבה הירוקה. ו... לא, הרקע עדיין לא השתנה! חוזרים לדף ניהול התוספים ו... אין את הלחצן שגיאות. סביר להניח שהסיבה לכך היא סקריפט התוכן, שרץ בתוך דף האינטרנט.
פותחים את החלונית של כלי הפיתוח בדף האינטרנט שהתוסף מנסה לשנות.
רק שגיאות זמן ריצה, console.warning ו-console.error יירשמו בדף ניהול התוספים.
כדי להשתמש בכלי הפיתוח מתוך סקריפט התוכן, לוחצים על החץ של התפריט הנפתח ליד top ובוחרים את התוסף.
בהודעת השגיאה כתוב color לא מוגדר. התוסף לא יכול להעביר את המשתנה בצורה נכונה.
תקנו את הסקריפט שהוחדר כדי להעביר את משתנה הצבע לקוד.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
כרטיסיות תוספים
יומנים של דפי תוספים שמוצגים ככרטיסייה, כמו שינוי דפים ואפשרויות דף מלא, מופיעים במסוף של דף האינטרנט ובדף ניהול התוספים.
מעקב אחרי בקשות רשת
בדרך כלל, החלון הקופץ יבצע את כל בקשות הרשת הנדרשות, לפני שגם המפתחים המהירים ביותר יוכלו לפתוח את כלי הפיתוח. כדי להציג את הבקשות האלה, צריך לרענן את הדף מתוך חלונית הרשת. החלון הקופץ יטען מחדש בלי לסגור את חלונית כלי הפיתוח.
הצהרת הרשאות
לתוספים יש יכולות דומות לאלו של דפי אינטרנט, אבל לעיתים קרובות הם זקוקים להרשאה כדי להשתמש בתכונות מסוימות, כמו קובצי cookie, אחסון ו-Cross-Origin XMLHttpRequsts. כדי לוודא שתוסף מסוים מבקש את ההרשאות הנכונות במניפסט שלו, עיינו במאמר בנושא ההרשאות ובממשקי ה-API של Chrome הזמינים.
{
"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
}
השלבים הבאים
למידע נוסף על תוספים לניפוי באגים, אפשר לעיין במאמר פיתוח וניפוי באגים. מידע נוסף על Chrome Devtools מפורט בתיעוד.