ברבעון האחרון של 2019, צוות כלי הפיתוח ל-Chrome התחיל לשפר את חוויית המפתחים בכלי הפיתוח בהקשר של קובצי cookie. דבר זה חשוב במיוחד מפני ש-Google Chrome ודפדפנים אחרים התחילו לשנות את התנהגות ברירת המחדל שלהם של קובצי cookie.
במהלך המחקר על הכלים שכבר זמינים בכלי הפיתוח, לעיתים קרובות מצאנו את עצמנו במצב הבא:
😰 המסוף היה מלא באזהרות ובהודעות שגיאה, שהכילו הסברים טכניים ולפעמים קישורים לאתר chromestatus.com. כל ההודעות נראו חשובות במידה שווה, כך שקשה היה להבין במה צריך לטפל קודם. חשוב יותר לציין שהטקסט לא מקשר למידע נוסף בכלי הפיתוח, ולכן היה קשה להבין מה קרה. ולסיום, בדרך כלל ההודעות לא הושגו לגמרי בידי מפתח האתר כדי שיוכל להבין איך לפתור את הבעיה או אפילו ללמוד על ההקשר הטכני.
אם אתה משתמש במסוף גם להודעות מהאפליקציה שלך, לפעמים אתה מתקשה לאתר אותן בין כל ההודעות מהדפדפן.
וגם לבני אדם, קשה גם לתהליכים אוטומטיים לבצע אינטראקציה עם הודעות במסוף. לדוגמה, מפתחים עשויים להשתמש ב-Chrome Headless ו-Puppeteer בתרחיש אינטגרציה רציפה (CI) או פריסה רציפה (CD). הודעות במסוף הן רק מחרוזות, ולכן מפתחים צריכים לכתוב ביטויים רגולריים או מנתח אחר כדי לחלץ מידע שניתן לפעול לפיו.
הפתרון: דיווח מובנה ומעשי על בעיות
כדי למצוא פתרון טוב יותר לבעיות שמצאנו, תחילה התחלנו לחשוב על הדרישות ואספנו אותן במסמך עיצוב.
המטרה שלנו היא להציג את הבעיות באופן שמסביר אותן באופן ברור ואיך לפתור אותן. בתהליך העיצוב הבנו שכל בעיה צריכה לכלול את ארבעת החלקים הבאים:
- שם הסרטון
- תיאור
- קישורים למשאבים שהושפעו בכלי הפיתוח
- וקישור להדרכה נוספת
אנחנו רוצים שהכותרת תהיה קצרה ומדויקת, כדי לעזור למפתחים להבין את הבעיה העיקרית ולרוב יש כבר רמזים לגבי הפתרון. לדוגמה, במקרה של בעיה שקשורה לקובץ cookie, עכשיו כתוב:
יש לסמן קובצי cookie מאתרים שונים כ'מאובטחים' כדי לאפשר הגדרה שלהם בהקשרים שבין כמה אתרים
כל בעיה כוללת תיאור מפורט יותר, שמסביר מה קרה, מספק עצות פרקטיות לתיקון הבעיה וכן קישורים לחלוניות אחרות בתוך כלי הפיתוח כדי להבין את הבעיה בהקשר שלה. אנחנו גם מספקים קישורים למאמרים מקיפים ב-web.dev כדי לאפשר למפתחי אתרים ללמוד על הנושא הזה בפירוט רב יותר.
חלק חשוב מכל בעיה הוא הקטע משאבים מושפעים, שמקשר לחלקים אחרים של כלי הפיתוח ומאפשר לבדוק את הנושא בקלות לעומק. בדוגמה של הבעיה בקובץ ה-cookie, אמורה להופיע רשימה של בקשות רשת שהקפיצו את הבעיה. לחיצה על הבקשה תעביר אתכם ישירות לחלונית 'רשת'. אנחנו מקווים שהשינוי הזה לא רק נוח, אלא גם מבהיר אילו חלוניות וכלים בכלי הפיתוח יכולים לשמש לניפוי באגים בסוג מסוים של בעיות.
מתוך מחשבה על האינטראקציה של המפתחים עם הכרטיסייה 'בעיות' בטווח הארוך, אנחנו מדמיינים את ההתפתחות הבאה של האינטראקציה עם המפתחים:
- כשמפתחי אתרים נתקלים בבעיה מסוימת בפעם הראשונה, מפתח אתרים יקרא את המאמר כדי להבין את הבעיה לעומק.
- כשאנחנו נתקלים בבעיה בפעם השנייה, אנחנו מקווים שתיאור הבעיה יספיק כדי להזכיר למפתח את נושא הבעיה, ולאפשר לו לחקור מיד את הבעיה ולנקוט פעולה לפתרון הבעיה.
- אחרי שנתקלנו בבעיה מספר פעמים, אנחנו מקווים שכותרת הבעיה תספיק למפתח כדי לזהות את סוג הבעיה.
היבט חשוב נוסף שרצינו לשפר הוא צבירה. לדוגמה, אם אותו קובץ cookie גרם לאותה בעיה מספר פעמים, רצינו לדווח על קובץ ה-cookie פעם אחת בלבד. מלבד צמצום משמעותי של מספר ההודעות, לעתים קרובות זה עוזר לזהות את שורש הבעיה במהירות.
ההטמעה
תוך התחשבות בדרישות האלה, הצוות החל לבחון איך להטמיע את התכונה החדשה. פרויקטים של כלי הפיתוח ל-Chrome מתפרסים בדרך כלל בשלושה תחומים שונים:
- Chromium, פרויקט הקוד הפתוח שנכתב ב-C++ מאחורי Google Chrome
- ממשק החזית של כלי הפיתוח, הטמעת JavaScript של כלי הפיתוח ל-Chrome
- פרוטוקול Chrome DevTools (CDP), השכבה שמחברת בין שני הסוגים
תהליך ההטמעה כלל שלוש משימות:
- בתוך Chromium, היה עלינו לזהות את הרכיבים שמכילים את המידע שאנחנו רוצים להציג, ולהפוך אותו לנגיש לפרוטוקול DevTools, בלי להתפשר על המהירות או האבטחה.
- לאחר מכן היינו צריכים לתכנן את Chrome DevTools Protocol (CDP) כדי להגדיר את ה-API שחושף את המידע ללקוחות, כמו החזית של DevTools.
- לבסוף, היינו צריכים להטמיע בממשק הקצה של כלי הפיתוח רכיב שמבקש את המידע מהדפדפן דרך CDP ומציג אותו בממשק משתמש מתאים, כדי שמפתחים יוכלו לפרש את המידע ולבצע בו פעולות בקלות.
מבחינת הדפדפן, קודם לכן בדקנו את אופן הטיפול בהודעות של המסוף, כי ההתנהגות שלהן דומה מאוד למה שרצינו לגבי בעיות. CodeSearch הוא בדרך כלל נקודת התחלה טובה לניתוחים כאלה. הוא מאפשר לכם לחפש ולחקור את קוד המקור המלא של פרויקט Chromium באינטרנט. כך למדנו על ההטמעה של הודעות במסוף והצלחנו ליצור דרך מקבילה אבל מובנית יותר לגבי הדרישות שאספנו לגבי הבעיות.
העבודה במקרה הזה מאתגרת במיוחד בגלל השלכות האבטחה שאנחנו חייבים תמיד להביא בחשבון. פרויקט Chromium עושה מאמצים רבים כדי להפריד דברים לתהליכים שונים, ולאפשר להם לתקשר רק דרך ערוצי תקשורת מבוקרים כדי למנוע דליפות מידע. בעיות עשויות להכיל מידע רגיש, לכן עלינו לשים לב לא לשלוח מידע זה לחלק בדפדפן שאינו אמור לדעת על כך.
בחזית של כלי הפיתוח
ה-DevTools עצמו הוא אפליקציית אינטרנט שנכתבת ב-JavaScript וב-CSS. זה דומה מאוד ליישומי אינטרנט רבים אחרים - חוץ מהעובדה שהיא קיימת כבר יותר מ-10 שנים. וכמובן, הקצה העורפי שלו הוא בעצם ערוץ תקשורת ישיר לדפדפן: Chrome DevTools Protocol.
בכרטיסייה 'בעיות', חשבנו קודם על סיפורי משתמשים ומה המפתחים צריכים לעשות כדי לפתור בעיה. הרעיונות שלנו התפתחו בעיקר סביב הפיכת הכרטיסייה 'בעיות' לנקודת התחלה מרכזית לחקירות שקישרו אנשים לחלוניות שבהן מוצג מידע מפורט יותר. החלטנו להציב את הכרטיסייה 'בעיות' יחד עם שאר הכרטיסיות בחלק התחתון של כלי הפיתוח, כדי שהיא תישאר פתוחה בזמן שהמפתח מנהל אינטראקציה עם רכיב אחר של כלי הפיתוח, כמו 'רשת' או החלונית 'אפליקציה'.
בהתאם לכך, מעצב ה-UX הבין מהי הכוונות שלנו, ויצר אב טיפוס של ההצעות הראשוניות הבאות:
אחרי דיונים רבים לגבי הפתרון הטוב ביותר, התחלנו ליישם את העיצוב ולחזור על ההחלטות כדי להגיע בהדרגה לכרטיסיית הבעיות כפי שהיא נראית היום.
גורם חשוב נוסף היה יכולת הגילוי של הכרטיסייה 'בעיות'. בעבר, הרבה תכונות נהדרות של Devtools לא היו גלויות מבלי שהמפתח ידע מה לחפש באופן ספציפי. בכרטיסייה 'בעיות', החלטנו להדגיש בעיות בכמה תחומים שונים כדי להבטיח שהמפתחים לא יחמיצו בעיות חשובות.
החלטנו להוסיף התראה לחלונית במסוף כי הודעות מסוימות הוסרו לטובת בעיות. הוספנו גם סמל למונה האזהרות והשגיאות בפינה השמאלית העליונה של החלון של כלי הפיתוח.
לבסוף, בנוסף לכרטיסייה 'בעיות', בנוסף לחלוניות אחרות של כלי הפיתוח, יש קישורים גם למשאבים שקשורים לבעיה בחזרה לכרטיסייה 'בעיות'.
בפרוטוקול
התקשורת בין הקצה העורפי לקצה העורפי פועלת בפרוטוקול שנקרא פרוטוקול Chromium DevTools (CDP). אפשר להתייחס ל-CDP בתור הקצה העורפי של אפליקציית האינטרנט, שהיא כלי הפיתוח ל-Chrome. ה-CDP מחולק למספר דומיינים, וכל דומיין מכיל מספר פקודות ואירועים.
בכרטיסייה 'בעיות', החלטנו להוסיף אירוע חדש לדומיין 'ביקורות' שמופעל בכל פעם שנתקלים בבעיה חדשה. כדי לוודא שנוכל לדווח גם על בעיות שעשויות להתרחש בזמן שכלי הפיתוח עדיין לא פתוחים, הדומיין 'ביקורת' מאחסן את הבעיות האחרונות ושולח אותן מיד לאחר החיבור של כלי הפיתוח. לאחר מכן, כלי הפיתוח אוסף את כל הבעיות האלה ומרכז אותן.
ה-CDP גם מאפשר ללקוחות פרוטוקול אחרים, כמו Puppeteer, לקבל ולעבד בעיות. אנחנו מקווים שהמידע על הבעיות המובנות שנשלח דרך ה-CDP יאפשר ויפשט את השילוב עם התשתית הקיימת של אינטגרציה רציפה (CI). כך ניתן לזהות בעיות ולתקן אותן עוד לפני פריסת הדף!
פרופיל
קודם כל, צריך להעביר הרבה יותר הודעות מהמסוף לכרטיסיית הבעיות. התהליך יימשך זמן מה, במיוחד כי אנחנו רוצים לספק תיעוד ברור ומעשי לגבי כל בעיה חדשה שנוסיף. אנחנו מקווים שבעתיד מפתחים יחפשו בעיות בכרטיסייה 'בעיות' במקום במסוף!
בנוסף, אנחנו חושבים איך לשלב בכרטיסייה 'בעיות' בעיות ממקורות אחרים מלבד הקצה העורפי של Chromium.
אנחנו בודקים דרכים לשמור על הסדר בכרטיסיית הבעיות ולשפר את נוחות השימוש. חיפושים, סינון וצבירה טובה יותר נמצאים ברשימה שלנו לשנה זו. כדי ליצור מספר הולך וגדל של בעיות המדווחות, אנחנו בתהליך של השקת קטגוריות של בעיות שיאפשרו להציג רק בעיות שקשורות להוצאה משימוש בעתיד. אנחנו גם שוקלים להוסיף אפשרות לטיפול בהמשך, שהמפתח יוכל להשתמש בה כדי להסתיר בעיות באופן זמני.
כדי שהבעיות ימשיכו לפעול, אנחנו רוצים שיהיה קל יותר לגלות איזה חלק בדף גרם לבעיה. באופן ספציפי, אנחנו שוקלים דרכים להבדיל בין בעיות אמיתיות לדף (למשל, אינטראקציה ישירה) לבין בעיות שמופעלות על ידי משאבים שאתם מטמיעים, אבל לא בשליטתכם הישירה (למשל, רשת מודעות) ולסנן אותם. בשלב הראשון, תהיה אפשרות להסתיר בעיות בקובצי cookie של צד שלישי ב-Chrome 86.
אם יש לכם הצעות לשיפור הכרטיסייה 'בעיות', נשמח לדעת על כך על ידי שליחת באג.
הורדת הערוצים של התצוגה המקדימה
כדאי להשתמש ב-Chrome Canary, Dev או Beta כדפדפן הפיתוח בברירת מחדל. ערוצי התצוגה המקדימה האלה נותנים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמת האינטרנט ומוצאים בעיות באתר לפני שהמשתמשים יגלו אותן!
יצירת קשר עם צוות כלי הפיתוח ל-Chrome
אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים בפוסט, או בכל דבר אחר שקשור לכלי הפיתוח.
- שלחו לנו הצעה או משוב דרך crbug.com.
- כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות
> עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח. - אפשר לשלוח ציוץ אל @ChromeDevTools.
- אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.