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

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

Kayce Basques

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

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

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

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

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

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

גרסה 4 של Lighthouse בחלונית הביקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סינון לפי הוא:service-worker ביוזמת

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

סינון לפי:קובץ שירות (service worker) יירוט

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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