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

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

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

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

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

בדיקת הסטטוס של Service Worker

אפשר לזהות מתי ה-Service Worker מתעורר כדי לבצע משימות באמצעות השלבים הבאים:

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

קריאה נוספת

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