תוספים לניפוי באגים

לתוספים יש גישה לאותם כלי פיתוח ל-Chrome כמו דפי אינטרנט. כדי להתמקצע בניפוי באגים בתוספים, צריך לדעת איך לאתר יומנים ושגיאות של רכיבי התוסף השונים. המדריך הזה מספק טכניקות בסיסיות לניפוי באגים בתוסף.

לפני שמתחילים

מדריך זה מתבסס על ההנחה שיש לך ניסיון בסיסי בפיתוח אתרים. מומלץ לקרוא את המאמר פיתוח יסודות כדי לקבל מבוא לתהליך העבודה של פיתוח תוספים. עיצוב ממשק המשתמש מספק מבוא לרכיבי ממשק המשתמש שזמינים בתוספים.

לשבור את התוסף

במדריך הזה נקטע רכיב תוסף אחד בכל פעם ותדגים איך לתקן את הבעיה. חשוב לזכור לבטל את הבאגים שנוספו בקטע אחד לפני שממשיכים לקטע הבא. קודם כול, מורידים את דוגמת הצבעBroken Color ב-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.

תיבת דו-שיח של שגיאה לא חוקית במפתח מניפסט.

כשמפתח מניפסט לא חוקי, הטעינה של התוסף נכשלת, אבל Chrome נותן רמז לפתרון הבעיה.

כדי לראות מה קורה, צריך לבטל את השינוי הזה ולהזין הרשאה לא חוקית. משנים את ההרשאה "activeTab" לאותיות קטנות "activetab":

manifest.json:

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

שומרים את התוסף ומנסים לטעון אותו שוב. הפעם היא אמורה להיטען. בדף הניהול של התוסף יש שלושה לחצנים: פרטים, הסרה ושגיאות. כשיש שגיאה, תווית הלחצן שגיאות הופכת לאדום. לוחצים על הלחצן Errors (שגיאות) על מנת לראות את השגיאה הבאה:

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

איתור הודעת שגיאה על ידי לחיצה על הלחצן 'שגיאות'.

לפני שממשיכים, צריך לשנות את ההרשאה בחזרה, ואז ללחוץ על ניקוי הכול בפינה השמאלית העליונה כדי לנקות את היומנים ולטעון מחדש את התוסף.

כיצד לנקות שגיאות בתוספים.

הערה: שימוש בסכימת מניפסט בעורך הקוד עוזר לוודא שהפורמט ושדות החובה של המניפסט נכונים.

ניפוי באגים ב-Service Worker

איתור יומנים

קובץ השירות (service worker) מגדיר את צבע ברירת המחדל לאחסון, ומתעד אותו במסוף. כדי להציג את היומן הזה, פותחים את החלונית של כלי הפיתוח ל-Chrome. לשם כך, לוחצים על הקישור הכחול לצד בדיקת התצוגות.

היומנים של Service Worker בחלונית Chrome DevTools.

נקודה חשובה: בדיקה של קובץ השירות (service worker) משאירה אותו פעיל. כדי לוודא שהתוסף יפעל כראוי כשקובץ השירות (service worker) שלך ייסגר, חשוב לזכור לסגור את כלי הפיתוח.

איתור השגיאות

נשבור את קובץ השירות (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.

הודעת שגיאה ברישום של קובץ שירות (service worker).

הערה: אם ה-Service Worker לא מצליח להירשם, לא תהיה לכם גישה לכלי הפיתוח ל-Chrome עד שתתקנו את הבאג ברישום.

השגיאה בפועל מתרחשת אחרי:

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

הודעת שגיאה מסוג Uncaught TypeError.

מבטלים את הבאג שהוספנו, לוחצים על ניקוי הכול בפינה השמאלית העליונה וטוענים מחדש את התוסף.

בדיקת הסטטוס של קובץ השירות (service worker)

כדי לזהות מתי קובץ השירות (service worker) מתעורר כדי לבצע משימות, ניתן לפעול לפי השלבים הבאים:

1. מעתיקים את מזהה התוסף שמופיע מעל 'תצוגות מפורטות'.

   

   מזהה התוסף בדף 'ניהול תוספים'.

2. פותחים את קובץ המניפסט בדפדפן. לדוגמה: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. בודקים את הקובץ.
4. עוברים לחלונית Application (אפליקציה).
5. נכנסים לחלונית Service Workers.

לבדיקת הקוד, מפעילים או מפסיקים את Service Worker באמצעות הקישורים שליד status.

הסטטוס של קובץ השירות (service worker) בחלונית האפליקציה. (לוחצים כדי להגדיל את התמונה).

בנוסף, אם ביצעתם שינויים בקוד של קובץ השירות (service worker), אפשר ללחוץ על Update או על skipwaiting כדי להחיל את השינויים באופן מיידי.

רענון של קובץ השירות (service worker) בחלונית האפליקציות. (לוחצים כדי להגדיל את התמונה).

הערה: לתשומת ליבכם: הפעולה הזו לא תטען מחדש רכיבים אחרים בתוסף.

ניפוי באגים בחלון הקופץ

עכשיו, אחרי שהתוסף מופעל כמו שצריך, אפשר לבטל את החלון הקופץ על ידי הדגשת השורות המודגשות בהמשך:

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

דף ניהול תוספים שמציג שגיאה בחלון קופץ.

אפשר לפתוח את כלי הפיתוח של החלון הקופץ על ידי בדיקת החלון הקופץ.

כלי הפיתוח שמציגים שגיאה בחלון קופץ.

לפי השגיאה tabs is undefined, התוסף לא יודע לאן להחדיר את סקריפט התוכן. כדי לתקן זאת, מתקשרים אל tabs.query() ובוחרים בכרטיסייה הפעילה.

כדי לעדכן את הקוד, לוחצים על Clear all (ניקוי הכול) בפינה הימנית העליונה וטוענים מחדש את התוסף.

הערה: לגבי דפי תוספים אחרים שמוצגים ככרטיסייה, כמו שינוי דפים ואפשרויות על דף מלא, אפשר למצוא יומנים על ידי בדיקת הדף או הדף 'ניהול תוספים'.

סקריפטים של תוכן ניפוי באגים

עכשיו נשבר את סקריפט התוכן על ידי שינוי המשתנה "color" ל"צבעים":

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

שגיאת תוסף מוצגת במסוף דף האינטרנט.

כדי להשתמש בכלי הפיתוח מתוך סקריפט התוכן, לוחצים על החץ של התפריט הנפתח ליד למעלה ובוחרים את התוסף.

Uncaught ReferenceError: הצבעים לא מוגדרים.

בשגיאה כתוב ש-colors לא מוגדר. התוסף לא יכול להעביר את המשתנה בצורה נכונה. מתקנים את הסקריפט שהוחדר כדי להעביר את משתנה הצבע לקוד.

מעקב אחר בקשות רשת

בדרך כלל, החלון הקופץ שולח את כל בקשות הרשת הנדרשות, לפני שמפתחים זריזים ביותר יכולים לפתוח את כלי הפיתוח. כדי להציג את הבקשות האלה, צריך לרענן מתוך חלונית הרשת. החלון הקופץ יטען מחדש בלי לסגור את החלונית של כלי הפיתוח.

צריך לרענן את הדף בתוך חלונית הרשת כדי להציג את החלון הקופץ של בקשות הרשת.

הצהרת הרשאות

לחלק מממשקי ה-API של תוספים נדרשות הרשאות. כדי לוודא שתוסף מבקש את ההרשאות הנכונות במניפסט, עיינו במאמר על הרשאות ובממשקי API של Chrome.

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

נקודה חשובה: כדי לבצע קריאות fetch() לשרת חיצוני, צריך להצהיר על כתובת ה-URL כהרשאת מארח.

קריאה נוספת

מידע נוסף על הכלים למפתחים ב-Chrome זמין במסמכי התיעוד.