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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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