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

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

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

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

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

בעיה ב-Chromium: ‏ 1018414

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

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

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

בעיה ב-Chromium: ‏ 1100253

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 384968

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

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

בעיה ב-Chromium: ‏ 1090802

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

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

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

בעיה ב-Chromium: ‏ 1096068

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

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

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

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

‫Lighthouse 6.2 בחלונית Lighthouse

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

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

• מומלץ להימנע ממשימות ארוכות ב-thread הראשי. הבדיקה מציינת את המשימות הארוכות ביותר ב-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.

בעבר, DevTools הציג רשימה שמוטמעת בחלונית Application > Service workers.

בעיה ב-Chromium: ‏ 807440

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

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

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

בעיה ב-Chromium: ‏ 1061385

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

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

בעיה ב-Chromium: 1093247

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

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

בעיה ב-Chromium: ‏ 1107766

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

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

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

בעיה ב-Chromium: ‏ 1051466

עדכונים בכרטיסייה Elements ובכרטיסייה Network

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

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

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

בעיה ב-Chromium: ‏ 1093227

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1103854

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

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

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

בעיה ב-Chromium: ‏ 1106221

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

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

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

בעיה ב-Chromium: ‏ 997694

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

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

בעיה ב-Chromium: ‏ 1067184

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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