מה חדש בכלי הפיתוח (Chrome 74)

Kayce Basques

טוב לראות אותך שוב! מה חדש?

גרסה של הדף הזה בסרטון

הדגשת כל הצמתים שמושפעים מנכס ה-CSS

מעבירים את העכבר מעל מאפיין CSS שמשפיע על מודל התיבה של צומת, כמו padding או margin, כדי להדגיש את כל הצמתים שמושפעים מההצהרה הזו.

כשמעבירים את העכבר מעל מאפיין שוליים, כל הצמתים שמושפעים מההצהרה הזו מודגשים

איור 1. כשמעבירים את העכבר מעל מאפיין margin, המערכת מדגישה את השוליים של כל הצמתים שהושפעו מההצהרה הזו

Lighthouse v4 בחלונית 'ביקורות'

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

קטגוריית האפליקציות לנייד (PWA) בדוח כוללת עכשיו מערכת למתן ניקוד לתגים.

מערכת הניקוד החדשה של התגים לקטגוריית ה-PWA

איור 3. מערכת הניקוד החדשה של התגים בקטגוריית PWA

כלי לצפייה בהודעות בינאריות ב-WebSocket

כדי להציג את התוכן של הודעת WebSocket בינארית:

  1. פותחים את החלונית Network. במאמר בדיקת הפעילות ברשת מוסבר על העקרונות הבסיסיים של ניתוח הפעילות ברשת.

    חלונית 'רשת'

    איור 4. חלונית 'רשת'

  2. לוחצים על WS כדי לסנן את כל המשאבים שאינם חיבורי WebSocket.

    אחרי שלוחצים על WS מוצגים רק חיבורי WebSocket

    איור 5. אחרי שלוחצים על WS מוצגים רק חיבורי WebSockety

  3. לוחצים על Name (שם) של חיבור WebSocket כדי לבדוק אותו.

    בדיקה של חיבור WebSocket

    איור 6. בדיקה של חיבור WebSocket

  4. לוחצים על הכרטיסייה הודעות.

    הכרטיסייה 'הודעות'

    איור 7. הכרטיסייה 'הודעות'

  5. לוחצים על אחת מהרשומות של Binary Message כדי לבדוק אותה.

    בדיקה של הודעה בינארית

    איור 8. בדיקה של הודעה בינארית

משתמשים בתפריט הנפתח שבתחתית חלון הצפייה כדי להמיר את ההודעה ל-Base64 או ל-UTF-8. לוחצים על העתקה ללוח העתקה ללוח כדי להעתיק את ההודעה הבינארית ללוח.

הצגת הודעה בינארית כ-Base64

איור 9. הצגת הודעה בינארית כ-Base64

צילום מסך של אזור בתפריט הפקודות

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

  1. ממקדים את DevTools ומקישים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות.

    תפריט הפקודות

    איור 10. תפריט הפקודות

  2. מתחילים להקליד area, בוחרים באפשרות צילום מסך של אזור ומקישים על Enter.

  3. גוררים את העכבר מעל הקטע בחלון התצוגה שרוצים לצלם.

    בחירת החלק של אזור התצוגה שרוצים לצלם

    איור 11. בחירת החלק של אזור התצוגה שרוצים לצלם

מסננים של קובצי שירות בחלונית 'רשת'

כדי להציג בקשות שנגרמו על ידי עובד שירות (initiated) או שעשויות להיות מותאמות על ידו (intercepted), מקלידים is:service-worker-initiated או is:service-worker-intercepted בתיבה לטקסט של המסנן בחלונית הרשת.

סינון לפי is:service-worker-initiated

איור 12. סינון לפי is:service-worker-initiated

סינון לפי is:service-worker-intercepted

איור 13. סינון לפי is:service-worker-intercepted

מידע נוסף על סינון יומני הרשת זמין במאמר סינון משאבים.

עדכונים בחלונית הביצועים

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

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

משימות ארוכות בהקלטות ביצועים

מעכשיו משימות ארוכות מוצגות בהקלטות הביצועים.

העברת העכבר מעל משימה ארוכה בהקלטה של ביצועים

איור 14. העברת העכבר מעל משימה ארוכה בהקלטת ביצועים

'הצגת התוכן הראשוני' בקטע 'זמנים'

הקטע 'תזמונים' של הקלטת הביצועים כולל עכשיו סימון של הצגת התמונה הראשונית (FP).

'הצגת התוכן הראשוני' בקטע 'זמנים'

איור 15. 'הצגת התוכן הראשוני' בקטע 'זמנים'

מדריך חדש בנושא DOM

במאמר תחילת העבודה עם הצגה ושינוי של DOM מוסבר על תכונות שקשורות ל-DOM.

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

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

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

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

מה חדש בכלי הפיתוח

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.