דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

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

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

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

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

Lighthouse v4 בחלונית Audits

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

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

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

מציג הודעות בינאריות של WebSocket

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

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

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

איור 5. לאחר לחיצה על WS מוצגים רק חיבורי WebSockety
לוחצים על השם של חיבור WebSocket כדי לבדוק אותו.

איור 6. בדיקת חיבור ל-WebSocket
לוחצים על הכרטיסייה הודעות.

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

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

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

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

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

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

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

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

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

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

המסננים של Service Worker בחלונית 'רשת'

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

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

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

סינון לפי is:service-worker-הורט

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

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

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

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

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

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

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

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

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

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

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

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

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

מדריך DOM חדש

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

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

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

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

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

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