ב-כלי הפיתוח של Chrome, אחד הכלים הנפוצים ביותר הוא החלונית Network (רשת), שמספקת תובנות חשובות לגבי הפעילות ברשת של דף אינטרנט.
במאמר הזה נסקור שיפורים רבים ש-Ioana Forfota ו-Silvia Eremia יזמו במסגרת התמחות STEP שלהן, ושאנחנו מאוד שמחים להציג. חיכינו בקוצר רוח לשיפורים האלה, שנבחרו בקפידה מתוך רשימת הבקשות הגדולה בכלי למעקב אחר בעיות ב-Chromium. הם יעזרו לכם להשתמש בלוח בצורה נוחה, אינטואיטיבית ומועילה יותר.
התכונות החדשות האלה מאפשרות למפתחי אינטרנט לבצע את הפעולות הבאות בחלונית Network:
- מתמקדים רק בבקשות הרלוונטיות מהרשת.
- הסבר על קודי המצב של HTTP בלי צורך בהפניות חיצוניות.
- זיהוי מהיר של שגיאות בבקשות ותיקון שלהן.
- הסבר על תגובות של תת-סוגים של JSON.
כל הפרטים מופיעים בהמשך.
סינון של בקשות להוספת תוספים ל-Chrome
תוספים ל-Chrome יכולים לשלוח בקשות רשת משלהם, שמופיעות לצד הבקשות של הדף בחלונית רשת. אם אתם לא מפתחים באופן פעיל תוסף, סביר להניח שהבקשות האלה לא יהיו רלוונטיות לכם. בעבר, הדרך היחידה להסתיר אותם הייתה להשתמש במסנן -scheme:chrome-extension או לנפות באגים במצב פרטי.
החל מגרסה 117 של Chrome, זה קל יותר. כדי להפחית את העומס בחלונית רשת, בכלי הפיתוח יש עכשיו תיבת סימון להחרגת בקשות של תוספים ל-Chrome.
קיימנו דיונים לגבי מצב ברירת המחדל של התכונה הזו. בהתחלה, העלינו בחשבון להפעיל את התכונה כברירת מחדל, מתוך מחשבה שהיא תשפר את חוויית השימוש של רוב המשתמשים. עם זאת, הגישה הזו עלולה לגרום לכך שחלק מהמשתמשים לא ידעו שכתובות URL של תוספים ל-Chrome יכולות להפעיל בקשות. המצב הזה עלול גם להוות אתגר למפתחי התוספים. לכן, מצב ברירת המחדל מוגדר כ 'מושבת'.
כשתיבת הסימון הזו מופעלת, רשימת הבקשות תהיה נקייה יותר, פחות מסיחת דעת ותתמקד יותר בבקשות החשובות ביותר, כך שתוכלו ליהנות מחוויית ניפוי באגים נעימה יותר.
טקסטים של מצבי תגובה של HTTP
הבנת קודי המצב של HTTP חיונית לניפוי באגים יעיל. עם זאת, חיפוש מתמיד של המשמעויות שלהם יכול להיות לא נוח. הוספנו לשיפורים של DevTools שיפור שימושי: כשמחזירים את הסמן מעל קוד סטטוס ברשימת הבקשות, מוצג מיד הסבר קצר על קוד הסטטוס – שם תיאורי שמבהיר את המשמעות שלו.
טקסט הסטטוס מופיע גם בתצוגת הכותרות, ממש ליד הקוד. בעבר התכונות האלה היו זמינות רק ל-HTTP/1.1, אבל עכשיו הן זמינות גם ל-HTTP/2 ול-HTTP/3. השינויים הקטנים לכאורה האלה משפיעים באופן משמעותי, חוסכים לכם זמן ומאפשרים לכם להתמקד בניפוי באגים במקום בחיפוש של משמעויות קוד.
שיפור בחשיפה של שגיאות
עכשיו קל יותר לזהות שגיאות במהירות ולטפל בהן בלי להיכנס לעומק לחלונית. כדי לעשות זאת, במקום רק להדגיש הודעות שגיאה באמצעות שינויים בצבע הטקסט, הוספנו סמלים ייחודיים כדי למשוך תשומת לב לשגיאות בבקשות, כמו שגיאות עם קוד סטטוס 404. האינדיקאטורים העדינים אך המועילים האלה יגרמו לשגיאות להיות בולטות יותר, וכך יעזרו לכם לא לפספס בעיות חשובות.
הדפסה יפה של תת-סוגים של JSON
פיתוח אינטרנט כרוך לעיתים קרובות בבדיקת תגובות JSON, אבל קריאת קובצי JSON גולמיים ללא עיצוב היא לא נוחה במיוחד. טיפול בתשובות כאלה, במיוחד בתת-סוגים כמו ld+json, hal+json או sparql-results+json, עשוי להיות מתסכל, למשל כשהן מופיעות בשורה אחת. כדי להקל על המשתמשים, הוספנו ל-DevTools תצוגה ידידותית יותר של תת-סוגים של JSON, שניתן לכווץ. עכשיו התשובות האלה מעוצבות, כך שמפתחים לא צריכים להסתמך על כלים חיצוניים. העיצוב החדש מציע ייצוג פשוט וקל לקריאה.
משוב חיובי מהקהילה
אמנם התכונות האלה עדיין בשלבי הטמעה מוקדמים, אבל התגובות מהקהילה הן חיוביות באופן גורף. ההטמעה המוצלחת שלהם גרמה להרבה משתמשים ליהנות מהשיפורים, ושיפורה משמעותית את חוויית השימוש שלהם. אפשר לקרוא חלק מהתשובות ב-X:
"וואו, זה מגניב! כלי הפיתוח של Chrome שדרגו את עצמם והם מציגים עכשיו קודי סטטוס HTTP שניתנים לקריאה על ידי בני אדם. כך קל יותר לראות מה השתבש בבקשה לרשת". – TribalIdeas on X
"הוא עזר לי מאוד לאחרונה. במיוחד כשמדובר בטפסים עם תוספים לחסימת מודעות ותוספים לבדיקה ותיקון שגיאות דקדוק" – MrAhmadAwais ב-X
רוצה לבדוק את התכונות החדשות האלה? אתם מוזמנים לנסות בעצמכם את חלונית הרשת המשופרת בכלים למפתחים של Chrome. ניפוי באגים מהנה!
הורדת הערוצים לתצוגה מקדימה
מומלץ להשתמש ב-Chrome Canary, ב-Dev או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.
יצירת קשר עם צוות כלי הפיתוח ל-Chrome
אתם יכולים להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור ל-DevTools.
- אתם יכולים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
- מדווחים על בעיה בכלי הפיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח ב-DevTools.
- שולחים ציוץ אל @ChromeDevTools.
- אפשר להשאיר תגובות בסרטונים של מה חדש בכלי הפיתוח ב-YouTube או בסרטונים של טיפים לשימוש בכלי הפיתוח ב-YouTube.