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

Jecelyn Yeen
Jecelyn Yeen

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

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

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

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

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

בעיה ב-Chromium: 1018414

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

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

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

יצירת צילומי מסך של צמתים

בעיה ב-Chromium: 1100253

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

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

בעיות בהודעה במסוף

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

תיבת סימון לבעיות בקובצי Cookie של צד שלישי

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 384968

אמולציה של משתמשים לא פעילים

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

אמולציה של משתמשים לא פעילים

בעיה ב-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 worker) .

קישור למקורות אחרים

בעיה ב-Chromium: 807440

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

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

בדוגמה הבאה, שימו לב איך בהתחלה כתוב בסיכום 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)

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

מידע על אבטחה ובידוד

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

בעיה ב-Chromium: 1051466

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

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

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

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

בעיה ב-Chromium: 1093227

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

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

חלונית המאפיינים בחלונית Elements

בעיה ב-Chromium: 1105205, 1116085

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

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

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

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

בעיה ב-Chromium: 1103854

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

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

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

השלמה אוטומטית של גופנים מותאמים אישית

בעיה ב-Chromium: 1106221

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

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

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

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

בעיה ב-Chromium: 997694

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

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

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

בעיה ב-Chromium: 1067184

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

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

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

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

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

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

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