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

Kayce Basques

טוב שחזרת! מה חדש?

גרסת וידאו של הדף הזה

הדגשת כל הצמתים שהושפעו ממאפיין CSS

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

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

‫Lighthouse v4 בחלונית Audits (ביקורות)

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

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

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

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

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

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

   

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

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

   

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

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

   

   איור 6. בדיקת חיבור WebSocket

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

   

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

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

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

ההקלטות של הביצועים מסמנות עכשיו משימות ארוכות ואת הצגת התמונה הראשונית (FP) של הדף במסך.

במאמר צמצום העבודה ב-thread הראשי יש דוגמה לשימוש בחלונית Performance (ביצועים) כדי לנתח את ביצועי טעינת הדף.

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

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

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

הצגת התוכן העיקרי (FMP) בקטע Timings

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

איור 15. הצגת התוכן העיקרי (FMP) בקטע Timings

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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