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

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

ב-DevTools מוצג עכשיו מידע על נגני מדיה בחלונית Media.

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

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

בעיה ב-Chromium: ‏ 1018414

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

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

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

בעיה ב-Chromium: ‏ 1100253

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

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

בעיות שקשורות לקובצי 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:

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

בעיות ב-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.

בעבר, כלי הפיתוח הציגו רשימה מוטמעת בחלונית 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

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

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

בעיה ב-Chromium: ‏ 1093247

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

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

בעיה ב-Chromium: ‏ 1107766

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

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

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

בעיה ב-Chromium: ‏ 1051466

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

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

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

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

בעיה ב-Chromium: ‏ 1093227

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1103854

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

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

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

בעיה ב-Chromium: ‏ 1106221

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

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

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

בעיה ב-Chromium: ‏ 997694

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

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

בעיה ב-Chromium: ‏ 1067184

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

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

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

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

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

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

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