איך יצרנו את הכרטיסייה 'בעיות בכלי הפיתוח ל-Chrome'

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

ברבעון האחרון של 2019, צוות כלי הפיתוח של Chrome התחיל לשפר את חוויית המפתחים ב-DevTools בנושא קובצי cookie. זה היה חשוב במיוחד כי Google Chrome ודפדפנים אחרים התחילו לשנות את התנהגות ברירת המחדל של קובצי ה-Cookie.

במהלך המחקר שלנו לגבי הכלים שכבר זמינים ב-DevTools, נתקלנו לעיתים קרובות במצבים כמו:

בעיות בחלונית 'מסוף'

😰 המסוף היה מלא באזהרות ובהודעות שגיאה, שהכילו הסברים טכניים למדי ולפעמים קישורים אל chromestatus.com. כל ההודעות נראו חשובות בערך באותה מידה, ולכן היה קשה להבין אילו לטפל בהן קודם. חשוב יותר, הטקסט לא קישר למידע נוסף ב-DevTools, ולכן היה קשה להבין מה קרה. לבסוף, בדרך כלל ההודעות הותירו את זה לגמרי רק למפתחי האתרים כדי להבין איך לפתור את הבעיה או אפילו לקבל מידע על ההקשר הטכני.

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

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

הפתרון: דיווח על בעיות באופן מובנה ויעיל

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

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

  • כותרת
  • תיאור
  • קישורים למשאבים שהושפעו ב-DevTools
  • וקישור להנחיות נוספות

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

סימון קובצי Cookie מאתרים שונים כבטוחים כדי לאפשר את ההגדרה שלהם בהקשרים בין אתרים

כל בעיה מכילה תיאור מפורט יותר, שבו מוסבר מה קרה, טיפים פרקטיים לפתרון הבעיה וקישורים לחלוניות אחרות ב-DevTools כדי להבין את הבעיה בהקשר. אנחנו גם מספקים קישורים למאמרים מפורטים באתר web.dev כדי לאפשר למפתחי אתרים ללמוד על הנושא בפירוט רב יותר.

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

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

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

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

בעיות מצטברות

ההטמעה

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

לאחר מכן, ההטמעה כללה שלוש משימות:

  • ב-Chromium, היינו צריכים לזהות את הרכיבים שמכילים את המידע שאנחנו רוצים להציג, ולהפוך את המידע הזה לנגיש לפרוטוקול DevTools בלי לפגוע במהירות או באבטחה.
  • לאחר מכן נדרשנו לתכנן את פרוטוקול Chrome DevTools (CDP) כדי להגדיר את ה-API שחושף את המידע ללקוחות, כמו חזית ה-DevTools.
  • לבסוף, נדרשנו להטמיע רכיב בחזית DevTools שמבקש את המידע מהדפדפן דרך CDP ומציג אותו בממשק משתמש מתאים, כדי שמפתחים יוכלו לפרש את המידע בקלות ולנהל איתו אינטראקציה.

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

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

בחזית של כלי הפיתוח

DevTools עצמו הוא אפליקציית אינטרנט שנכתבה ב-JavaScript וב-CSS. הוא דומה מאוד לאפליקציות אינטרנט רבות אחרות, חוץ מזה שהוא קיים כבר יותר מ-10 שנים. וכמובן, הקצה העורפי שלו הוא בעצם ערוץ תקשורת ישיר לדפדפן: פרוטוקול כלי הפיתוח של Chrome.

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

בהתאם לכך, מעצב ה-UX שלנו הבין למה אנחנו שואפים, ויצר אב טיפוס של ההצעות הראשוניות הבאות:

אבות טיפוס

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

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

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

הודעה על בעיה

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

נושאים קשורים

בפרוטוקול

התקשורת בין הקצה הקדמי לקצה העורפי פועלת באמצעות פרוטוקול שנקרא Chromium DevTools Protocol‏ (CDP). אפשר לחשוב על ה-CDP כחלק העורפי של אפליקציית האינטרנט שנקראת 'כלי הפיתוח של Chrome'. ה-CDP מחולק למספר דומיינים, וכל דומיין מכיל מספר פקודות ואירועים.

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

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

עתיד

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

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

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

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

יש לכם הצעות לשיפור הכרטיסייה 'בעיות'? אתם יכולים לשלוח לנו דיווח על באג.

הורדת הערוצים לתצוגה מקדימה

כדאי להשתמש ב-Chrome Canary, Dev או בטא כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

אתם יכולים להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור ל-DevTools.