לתוספים יש גישה לאותם כלי פיתוח ל-Chrome כמו דפי אינטרנט. כדי להפוך למומחה בניפוי באגים בתוספים, עליכם לדעת כיצד לאתר יומנים ושגיאות של רכיבי התוספים השונים. המדריך הזה מספק טכניקות בסיסיות לניפוי באגים בתוסף שלכם.
לפני שמתחילים
המדריך הזה מניח שיש לכם ניסיון בסיסי בפיתוח אתרים. מומלץ לקרוא יסודות פיתוח למבוא לתהליך פיתוח התוספים. עיצוב ממשק המשתמש מספק מבוא למשתמש רכיבי ממשק שזמינים בתוספים.
איך מבטלים את התוסף
המדריך הזה יגרום לשיבושים ברכיב אחד של תוסף בכל פעם והוא ידגים איך לתקן אותו. חשוב לזכור לבטל את הבאגים שנוספו בקטע אחד לפני שממשיכים לקטע הבא. מתחילים בהורדה של Broken Color Example מ-GitHub.
ניפוי באגים במניפסט
קודם כול, נפרק את קובץ המניפסט על ידי שינוי המפתח "version"
ל-"versions"
:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
עכשיו ננסה לטעון את התוסף באופן מקומי. תוצג תיבת דו-שיח של שגיאה שמצביעה על הבעיה:
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.
![תוסף עם מפתח מניפסט לא חוקי מפעיל תיבת דו-שיח של שגיאה במהלך ניסיון הטעינה.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/an-extension-an-invalid-9ab91f867f94c.png?authuser=9&hl=he)
כשמפתח מניפסט לא חוקי, טעינת התוסף נכשלה, אבל Chrome נותן רמז איך לפתור את הבעיה.
כדי לראות מה קורה, צריך לבטל את השינוי ולהזין הרשאה לא חוקית.
משנים את ההרשאה "activeTab"
לאותיות קטנות "activetab"
:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
שומרים את התוסף ומנסים לטעון אותו שוב. היא אמורה להיטען הפעם. בתוסף בדף הניהול יופיעו שלושה לחצנים: פרטים, הסרה ושגיאות. השגיאות תווית הלחצן הופכת לאדום כשיש שגיאה. לוחצים על הלחצן שגיאות כדי לראות את השגיאה הבאה:
Permission 'activetab' is unknown or URL pattern is malformed.
![לוחצים על לחצן השגיאה ומציגים הודעת שגיאה](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/error-button-is-clicked-a7713a11553a.gif?authuser=9&hl=he)
לפני שממשיכים, צריך לשנות את ההרשאה בחזרה, ללחוץ על ניקוי הכול בפינה השמאלית העליונה כדי למחוק את היומנים ולטעון מחדש את התוסף.
![לחצן ניקוי הכול](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/clear-button-2f67dd9230519.png?authuser=9&hl=he)
ניפוי באגים ב-Service Worker
מתבצע איתור של יומנים
ה-Service Worker מגדיר את צבע ברירת המחדל לאחסון ומרשום אותו במסוף. כדי להציג את היומן, פותחים את החלונית של כלי הפיתוח ל-Chrome על ידי לחיצה על הקישור הכחול לצד בדיקת תצוגות.
![פותחים את כלי הפיתוח בשביל ה-service worker של התוסף.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/opening-devtools-the-ex-685e204e20773.png?authuser=9&hl=he)
שגיאות איתור
כדי לנתק את קובץ השירות (service worker), שינוי onInstalled
לאותיות קטנות oninstalled
:
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.');
});
});
כדי לראות את יומן השגיאות, צריך לרענן וללחוץ על שגיאות. השגיאה הראשונה מציינת שה-Service Worker לא נרשם. המשמעות היא שמשהו השתבש במהלך ההפעלה:
Service worker registration failed. Status code: 15.
![הרישום של קובץ השירות נכשל. קוד סטטוס: הודעת שגיאה 15](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/service-worker-registrati-9791df79120e6.png?authuser=9&hl=he)
השגיאה בפועל מתרחשת אחרי:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
![Uncaught TypeError: לא ניתן לקרוא מאפיינים של הודעת שגיאה לא מוגדרת](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-typeerror-canno-45ae014961338.png?authuser=9&hl=he)
מבטלים את הבאג שהצגנו, לוחצים על ניקוי הכול בפינה השמאלית העליונה וטוענים מחדש את התוסף.
בדיקת הסטטוס של Service Worker
אפשר לזהות מתי ה-Service Worker מתעורר כדי לבצע משימות באמצעות השלבים הבאים:
- מעתיקים את מזהה התוסף שנמצא מעל 'בדיקת תצוגות מפורטות'.
מזהה תוסף בדף 'ניהול תוספים'. - יש לפתוח את קובץ המניפסט בדפדפן. לדוגמה:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- בודקים את הקובץ.
- עוברים לחלונית Application.
- נכנסים לחלונית Service Workers.
כדי לבדוק את הקוד, מפעילים או מפסיקים את Service Worker באמצעות הקישורים שליד סטטוס.
![הסטטוס של Service Worker בחלונית האפליקציה](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/start-stop-service-worker.png?auto=format&w=845&authuser=9&hl=he)
כמו כן, אם ביצעתם שינויים בקוד של Service Worker, תוכלו ללחוץ על Update או על skip Waiting כדי להחיל את השינויים באופן מיידי.
![הסטטוס של Service Worker בחלונית האפליקציה](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/update-or-skipwaiting.png?auto=format&w=845&authuser=9&hl=he)
ניפוי באגים בחלון הקופץ
עכשיו שהתוסף מאותחל כראוי, נסגור את החלון הקופץ ונוסיף הערות לשורות המודגשות הבאות:
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
});
});
});
חוזרים לדף 'ניהול תוספים'. הלחצן שגיאות יופיע שוב. אפשר ללחוץ עליו כדי להציג את היומן החדש. תוצג הודעת השגיאה הבאה:
Uncaught ReferenceError: tabs is not defined
![דף ניהול התוספים מציג שגיאה של חלון קופץ](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extensions-management-pag-00a0f48a76239.png?authuser=9&hl=he)
כדי לפתוח את כלי הפיתוח בחלון הקופץ, בודקים אותו.
![כלי הפיתוח מציגים שגיאה בחלון קופץ.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/devtools-displaying-popup-0ed24fd80361a.png?authuser=9&hl=he)
השגיאה tabs is undefined
מציינת שהתוסף לא יודע לאן להחדיר את סקריפט התוכן.
כדי לתקן את הבעיה, צריך להפעיל את השירות tabs.query()
ולבחור את הכרטיסייה הפעילה.
כדי לעדכן את הקוד, לוחצים על הלחצן ניקוי הכול בפינה השמאלית העליונה ואז טוענים מחדש את לתוסף.
סקריפטים של תוכן ניפוי באגים
עכשיו נשבור את סקריפט התוכן על ידי שינוי המשתנה 'color' (צבע) ל-"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;
}
מרעננים את הדף, פותחים את החלון הקופץ ולוחצים על התיבה הירוקה. לא קורה כלום.
בדף 'ניהול תוספים', הלחצן שגיאות לא מופיע. הסיבה לכך היא שרק שגיאות זמן ריצה, console.warning
ו-
console.error
מתועדים בדף ניהול התוספים.
סקריפטים של תוכן פועלים בתוך אתר. לכן, כדי למצוא את השגיאות האלה, עלינו לבדוק את דף האינטרנט שהתוסף מנסה לשנות:
Uncaught ReferenceError: colors is not defined
![שגיאת תוסף מוצגת במסוף דפי האינטרנט](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extension-error-displayed-ca9d8c6c336b.png?authuser=9&hl=he)
כדי להשתמש בכלי פיתוח מתוך סקריפט התוכן, לוחצים על החץ של התפריט הנפתח שמוצג לצד למעלה ובוחרים את התוסף הרצוי.
![Uncaught ReferenceError: הצבעים לא מוגדרים](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-referenceerror-e5847be3a7de9.png?authuser=9&hl=he)
השגיאה אומרת colors
לא מוגדר. התוסף לא יכול להעביר את המשתנה בצורה תקינה.
מתקנים את הסקריפט שהוחדר כדי להעביר את משתנה הצבע לקוד.
מעקב אחרי בקשות רשת
בדרך כלל, ההודעה הקופצת מבצעת את כל בקשות הרשת הנדרשות לפני הפעולה המהירה ביותר מפתחים יכולים לפתוח כלי פיתוח. כדי להציג את הבקשות האלה, צריך לרענן את חלונית הרשת. הוא טוען מחדש את החלון הקופץ בלי לסגור את חלונית כלי הפיתוח.
![צריך לרענן את חלונית הרשת כדי להציג בקשות רשת קופצות](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/refresh-inside-network-p-43993068e650e.gif?authuser=9&hl=he)
הצהרת ההרשאות
חלק מממשקי ה-API של תוספים נדרשות הרשאות. אפשר לעיין במאמר הרשאות ובקישור Chrome ממשקי API כדי לוודא שתוסף מבקש את ההרשאות המתאימות במניפסט.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
קריאה נוספת
מידע נוסף על Chrome Devtools זמין בתיעוד.