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

לתוספים יש גישה לאותם כלי פיתוח ל-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.

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

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

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

manifest.json:

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

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

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

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

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

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

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

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

מתבצע איתור של יומנים

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

יומנים של Service Worker בחלונית כלי הפיתוח ל-Chrome.

נקודה חשובה: בדיקת קובץ השירות (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 באמצעות הקישורים שליד סטטוס.

הסטטוס של Service Worker בחלונית האפליקציה. (יש ללחוץ כדי להגדיל את התמונה).

כמו כן, אם ביצעתם שינויים בקוד של Service Worker, תוכלו ללחוץ על Update או על skip Waiting כדי להחיל את השינויים באופן מיידי.

רענון של Service Worker בחלונית Application. (יש ללחוץ כדי להגדיל את התמונה).

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

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

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

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() ולבחור את הכרטיסייה הפעילה.

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

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

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

עכשיו נשבור את סקריפט התוכן על ידי שינוי המשתנה '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

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

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

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

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

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

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

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

הצהרת ההרשאות

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

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

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

קריאה נוספת

מידע נוסף על Chrome Devtools זמין בתיעוד.