מה חדש בכלי הפיתוח (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. כדי לבדוק את אחת מההודעות, לוחצים על אחת מהרשומות של Binary Message.

   

   איור 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

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

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

בהקלטות של ביצועים מסומנות עכשיו משימות ארוכות ו-First Paint.

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

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

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

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

הצגת התוכן הראשוני (FCP) בקטע Timings

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח ב-YouTube או טיפים לשימוש בכלי הפיתוח ב-YouTube.

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

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