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

Jecelyn Yeen

שאילתות CSS בנוגע למאגר שאפשר לערוך בחלונית Styles

מעכשיו אפשר לראות ולערוך שאילתות של מאגרי CSS בחלונית Styles.

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

בחלונית Elements, לוחצים על רכיב DOM עם כלל @container, וכלי הפיתוח מציגים את המידע על @container בחלונית Styles. לוחצים עליו כדי לערוך את הגודל. בחלונית Styles מוצג גם מידע על המאגר המתאים. מעבירים את העכבר מעל התג כדי להדגיש את רכיב מאגר התגים בדף ולבדוק את הגודל של מאגר התגים. לוחצים עליו כדי לבחור את רכיב מאגר התגים.

התכונה 'שאילתות מאגר תגים' היא כרגע ניסיונית. כדי לבדוק את התכונה, צריך להפעיל את הדגל #enable-container-queries בקטע chrome://flags.

שאילתות CSS בנוגע למאגר שאפשר לערוך בחלונית Styles

בעיה ב-Chromium: ‏ 1146422

תצוגה מקדימה של חבילת אינטרנט בחלונית Network

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

התכונה 'חבילת אתרים' היא כרגע ניסיונית. כדי לבדוק את התכונה, צריך להפעיל את הדגל #enable-experimental-web-platform-features בקטע chrome://flags.

תצוגה מקדימה של חבילת אתרים

בעיה ב-Chromium: ‏ 1182537

ניפוי באגים ב-Attribution Reporting API

שגיאות ב-Attribution Reporting API מדווחות עכשיו בכרטיסייה בעיות.

‫Attribution Reporting הוא API חדש שעוזר לכם למדוד מקרים שבהם פעולת משתמש (כמו קליק על מודעה או צפייה במודעה) מובילה להמרה, בלי להשתמש במזהים באתרים שונים.

שגיאות של Attribution Reporting API בכרטיסייה 'בעיות'

בעיה ב-Chromium: ‏ 1190735

טיפול טוב יותר במחרוזות במסוף

תפריט הקשר החדש במסוף מאפשר להעתיק כל מחרוזת כתוכן, כליטרל של JavaScript או כליטרל של JSON.

תפריט הקשר חדש במסוף

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

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

בעיה ב-Chromium: ‏ 1208389

שיפור בניפוי באגים של CORS

שגיאות TypeErrors שקשורות ל-CORS במסוף מקושרות עכשיו לחלונית Network ולכרטיסייה Issues.

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

סמלים לצד הודעת השגיאה שקשורה ל-CORS

בעיה ב-Chromium: ‏ 1213393

‫Lighthouse 8.1

החלונית Lighthouse מריצה עכשיו את Lighthouse 8.1.

Lighthouse

אם האתר שלכם חושף מפות מקור ל-Lighthouse, חפשו את הלחצן View Treemap כדי לראות פירוט של ה-JavaScript שנשלח, שאפשר לסנן לפי גודל וכיסוי בזמן הטעינה.

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

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

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

בעיה ב-Chromium: ‏ 772558

הצגת כתובת ה-URL של ההערה החדשה בחלונית Manifest

בחלונית Manifest מוצגת עכשיו כתובת ה-URL של ההערה החדשה.

ב-ChromeOS ‏ (CrOS), אפליקציות Chrome ואפליקציות ל-Android שמצהירות על יכולת 'יצירת הערה חדשה' יכולות להיבחר כאפליקציה לרישום הערות בהגדרות העט (ההגדרה הזו מופיעה אם נעשה שימוש בעט במכשיר CrOS). אם בוחרים באפליקציה ככלי לרישום הערות, אפשר להפעיל אותה באמצעות הלחצן 'יצירת הערה' בלוח הצבעים של העט. הוספת השדה new-note-url למניפסט של האפליקציה היא חלק מהמאמץ להוסיף פונקציונליות שוות ערך לאפליקציות אינטרנט.

כתובת URL של הערה חדשה בחלונית Manifest

בעיה ב-Chromium: ‏ 1185678

תיקנו סלקטורים תואמים ב-CSS

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

הסלקטורים שמופרדים באמצעות פסיקים בחלונית Styles צבועים בצבעים שונים בהתאם להתאמה שלהם לצומת ה-DOM שנבחר:

  • חלק שלא תואם מוצג באפור בהיר.
  • חלק הבורר התואם מוצג בשחור.

סלקטורים תואמים ב-CSS

בעיה ב-Chromium: ‏ 1219153

הדפסה יפה של תגובות JSON בחלונית 'רשת'

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

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

הדפסה יפה של תגובות JSON בחלונית 'רשת'

באג ב-Chromium: ‏ 998674

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

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

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

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

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

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