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

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

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

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

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

בעיה ב-Chromium: 1018414

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

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

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

בעיה ב-Chromium: 1100253

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

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

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

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

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

בעיה ב-Chromium: 1105205, 1116085

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

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

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

בעיה ב-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 שקשורים לכלי פיתוח.

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

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