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

Jecelyn Yeen

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

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

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

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

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

בעיה ב-Chromium: 1018414

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

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

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

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

בעיה ב-Chromium: 1100253

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

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

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

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

תיבת הסימון 'בעיות שקשורות לקובצי cookie של צד שלישי'

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

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

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

לדוגמה, כשהגופן "Rubik" מותקן במכשיר והכלל @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 פועל עכשיו Lighthouse 6.2. בנתוני הגרסה יש רשימה מלאה של השינויים.

ביטול גודל התמונה

ביקורות חדשות בגרסה 6.2 של Lighthouse:

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

ביקורות מעודכנות בגרסה 6.2 של Lighthouse:

  • יש להסיר 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-Implementder-Policy (COEP) ו-Cross-Origin-Opener-Policy (COOP) בפרטי המסגרת.

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

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

בעיה ב-Chromium: 1051466

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

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

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

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

בעיה ב-Chromium: 1093227

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

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

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

בעיה ב-Chromium: 1105205, 1116085

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

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

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

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

בעיה ב-Chromium: 1103854

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

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

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

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

בעיה ב-Chromium: 1106221

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

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

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

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

בעיה ב-Chromium: 997694

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

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

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

בעיה ב-Chromium: 1067184

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59