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

החלונית 'מדיה חדשה'

מעכשיו, כלי הפיתוח מציגים מידע על נגני מדיה בחלונית המדיה.

לפני הוספת חלונית המדיה החדשה ל-DevTools, אפשר היה למצוא ב-chrome://media-internals את המידע ביומן ופרטי ניפוי הבאגים לגבי נגני הווידאו.

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

בעיה ב-Chromium: 1018414

צילום צילומי מסך של צמתים דרך תפריט ההקשר של חלונית הרכיבים

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

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

בעיה ב-Chromium: 1100253

עדכונים בכרטיסייה 'בעיות'

סרגל האזהרה בנושא בעיות בחלונית של מסוף Google הוחלף עכשיו בהודעה רגילה.

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

בעיות ב-Chromium: ‏ 1096481, ‏ 1068116, ‏ 1080589

אמולציה של גופנים מקומיים חסרים

פותחים את הכרטיסייה 'עיבוד' ומשתמשים בתכונה החדשה השבתת גופנים מקומיים כדי לדמות מקורות local() חסרים בכללי @font-face.

לדוגמה, אם הגופן Rubik מותקן במכשיר שלכם וכלל @font-face src משתמש בו כגופן local(), Chrome משתמש בקובץ הגופן המקומי מהמכשיר.

כשהאפשרות Disable local fonts מופעלת, כלי הפיתוח מתעלמים מהגופנים local() ומאחזרים אותם מהרשת.

לעיתים קרובות, מפתחים ומעצבים משתמשים בשתי עותקים שונים של אותו גופן במהלך הפיתוח:

• גופן מקומי לכלים שלכם לעיצוב,
• גופן אינטרנט לקוד

השבתת הגופנים המקומיים מאפשרת לכם:

• ניפוי באגים ומדידה של ביצועי טעינת גופנים באינטרנט ואופטימיזציה שלהם
• אימות תקינות הכללים של @font-face ב-CSS
• מה ההבדל בין גופנים לאינטרנט לבין הגרסאות המקומיות שלהם

בעיה ב-Chromium: 384968

הדמיה של משתמשים לא פעילים

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

בעיה ב-Chromium: 1090802

יצירת אמולציה של prefers-reduced-data

שאילתת המדיה prefers-reduced-data מזהה אם המשתמש מעדיף שיוצג לו תוכן חלופי שמשתמש בפחות נתונים לצורך עיבוד הדף.

עכשיו אפשר להשתמש בכלי הפיתוח כדי לדמות את שאילתה המדיה prefers-reduced-data.

בעיה ב-Chromium: 1096068

תמיכה בתכונות חדשות של JavaScript

עכשיו יש תמיכה טובה יותר בכלי הפיתוח בחלק מהתכונות העדכניות ביותר של שפת JavaScript:

• אופרטורים לוגיים להקצאה – כלי הפיתוח תומכים עכשיו בהקצאה לוגית באמצעות האופרטורים החדשים &&=,‏ ||= ו-??= בחלוניות 'מסוף' ו'מקורות'.
• הדפסה יפה של מפרידים מספריים – כלי הפיתוח מדפיסים עכשיו בצורה יפה את המפרידים המספריים בחלונית 'מקורות'.

בעיות ב-Chromium: 1086817, ‏ 1080569

Lighthouse 6.2 בחלונית של Lighthouse

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

ביקורות חדשות ב-Lighthouse 6.2:

• להימנע ממשימות ארוכות בתהליך הראשי. הבדיקה מציינת את המשימות הארוכות ביותר ב-thread הראשי. היא עוזרת לזהות את המשימות שמאטות את הקלט במידה הרבה ביותר.
• הקישורים ניתנים לסריקה. בודקים אם המאפיין href של רכיבי עוגן מקשר ליעד מתאים, כדי שניתן יהיה לגלות את הקישורים.
• רכיבי תמונה ללא הגדרת גודל – בודקים אם הוגדרו מאפייני width ו-height מפורשים ברכיבי תמונה. גודל תמונה מפורש יכול להפחית שינויים בפריסה ולשפר את ה-CLS.
• אין להשתמש באנימציות ללא הרכבת שכבות. הדוח כולל אנימציות לא מורכבות שנראות לא חלקות ומפחיתות את ה-CLS.
• הקשבה לאירועים unload. דיווח על האירוע unload. מומלץ להשתמש באירועים pagehide או visibilitychange במקום זאת, כי האירוע unload לא מופעל באופן מהימן.

ביקורות מעודכנות ב-Lighthouse 6.2:

• הסרת JavaScript שאינו בשימוש מעכשיו, Lighthouse ישפר את הביקורת אם בדף יש מפות מקור של JavaScript שגלויות לכולם.

בעיה ב-Chromium: 772558

הוצאה משימוש של הרשימה 'מקורות אחרים' בחלונית של קובצי השירות (service workers)

כלי הפיתוח כוללים עכשיו קישור להצגת הרשימה המלאה של קובצי השירות (service worker) ממקורות אחרים בכרטיסייה חדשה בדפדפן – chrome://serviceworker-internals/?devtools.

בעבר, בכלי הפיתוח הוצגה רשימה בתצוגת עץ בחלונית Application (אפליקציה) > Service workers (שירותי משתמשים).

בעיה ב-Chromium: 807440

הצגת סיכום הכיסוי של פריטים שסוננו

עכשיו, כשמחילים מסננים בכרטיסייה Coverage, DevTools מחשב מחדש את הסיכום של פרטי הכיסוי ומציג אותו באופן דינמי. בעבר, בכרטיסייה Coverage (כיסוי) תמיד הוצג סיכום של כל פרטי הכיסוי.

בדוגמה הבאה, שימו לב שהסיכום מתחיל ב-446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. ולאחר החלת סינון CSS הוא הופך ל-57 kB of 604 kB (10%) used so far. 546 kB unused..

בעיה ב-Chromium: 1061385

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

עכשיו מוצגת בתצוגה מפורטת של כל פריים ב-DevTools. כדי לגשת אליו, לוחצים על מסגרת בתפריט Frames בחלונית Application.

בעיה ב-Chromium: 1093247

פרטי המסגרת של חלונות פתוחים

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

בעיה ב-Chromium: 1107766

מידע על אבטחה ובידוד (COEP או COOP)

עכשיו מוצגים ב-DevTools פרטי ההקשר המאובטח, Cross-Origin-Embedder-Policy‏ (COEP) ו-Cross-Origin-Opener-Policy‏ (COOP) בפרטים של המסגרת.

בקרוב נוסיף עוד פרטי אבטחה לתצוגת פרטי המסגרת.

בעיה ב-Chromium: 1051466

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

הצעה לצבעים נגישים בחלונית 'סגנונות'

עכשיו מוצגות ב-DevTools הצעות לצבעים לטקסט עם ניגודיות נמוכה.

בדוגמה הבאה, h1 כולל טקסט בניגודיות נמוכה. כדי לפתור את הבעיה, פותחים את בוחר הצבעים של הנכס color בחלונית 'סגנונות'. אחרי שמרחיבים את הקטע יחס ניגודיות, מוצגות ב-DevTools הצעות לצבעים ברמות AA ו-AAA. לוחצים על הצבע המוצע כדי להחיל אותו.

בעיה ב-Chromium: 1093227

החזרת החלונית מאפיינים לחלונית הרכיבים

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

בעיה ב-Chromium: ‏ 1105205, ‏ 1116085

ערכים של כותרת X-Client-Data שקריאים לבני אדם בחלונית 'רשת'

כשבודקים משאב רשת בחלונית 'רשת', כלי הפיתוח מעצבים עכשיו את ערכי הכותרת X-Client-Data בחלונית 'כותרות' כקוד.

הכותרת X-Client-Data HTTP מכילה רשימה של מזהי ניסויים ודגלים של Chrome שמופעלים בדפדפן. ערכי הכותרות הגולמיים נראים כמו מחרוזות אטומות כי הם מאגרי פרוטוקול בסריאליזציה בקידוד base64. כדי לשפר את השקיפות של התוכן למפתחים, עכשיו מוצגים ב-DevTools הערכים המפוענחים.

בעיה ב-Chromium: 1103854

השלמה אוטומטית של גופנים מותאמים אישית בחלונית 'סגנונות'

גווני גופן מיובאים מתווספים עכשיו לרשימת ההשלמה האוטומטית של CSS כשעורכים את המאפיין font-family בחלונית Styles.

בדוגמה הזו, 'Noto Sans' הוא גופן מותאם אישית שמותקן במכונה המקומית. הוא מוצג ברשימת ההשלמות של CSS. בעבר זה לא היה כך.

בעיה ב-Chromium: 1106221

הצגה עקבית של סוג המשאב בחלונית 'רשת'

עכשיו, DevTools מציג באופן עקבי את אותו סוג משאב כמו בבקשת הרשת המקורית, ומוסיף את הערך / Redirect לערך העמודה Type כשמתרחשת הפניה אוטומטית (סטטוס 302).

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

בעיה ב-Chromium: 997694

לחצני ניקוי בחלוניות 'רכיבים' ו'רשת'

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

בעיה ב-Chromium: 1067184

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.