דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

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

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

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

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

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

בעיה ב-Chromium: 1018414

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

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

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

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

בעיה ב-Chromium: 1100253

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 384968

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

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

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

בעיה ב-Chromium: 1090802

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

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

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

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

בעיה ב-Chromium: 1096068

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

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

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

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

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

בעיה ב-Chromium: 807440

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

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

בדוגמה הבאה רואים איך בהתחלה כתוב 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 בחלונית Styles (סגנונות). אחרי שמרחיבים את הקטע יחס ניגודיות, כלי הפיתוח מספקים הצעות לצבעים AA ו-AAA. לוחצים על הצבע המוצע כדי להחיל את הצבע.

בעיה ב-Chromium: 1093227

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

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

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

בעיה ב-Chromium: 1105205, 1116085

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

כשבודקים משאב רשת בחלונית Network, כלי הפיתוח מעצבים עכשיו את כל ערכי הכותרת מסוג 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 לערך בעמודה Type כשההפניה מתבצעת (סטטוס 302).

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

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

בעיה ב-Chromium: 997694

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

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

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

בעיה ב-Chromium: 1067184

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

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

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

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

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