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