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

Jecelyn Yeen

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

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

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

בחלונית Elements, לוחצים על רכיב DOM עם כלל ‎@container at. כלי הפיתוח מציגים עכשיו את המידע על ‎@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

טיפול טוב יותר במחרוזות ב-Console

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

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

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

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

בעיה ב-Chromium: ‏ 1208389

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

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

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

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

בעיה ב-Chromium: ‏ 1213393

Lighthouse 8.1

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

Lighthouse

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

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

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

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

בעיה ב-Chromium: ‏ 772558

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

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

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

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

בעיה ב-Chromium: ‏ 1185678

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

תוקן ב-DevTools סלקטור תואם ב-CSS שלא פעל בגרסה הקודמת.

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

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

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

בעיה ב-Chromium: ‏ 1219153

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

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

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

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

באג ב-Chromium: ‏ 998674

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

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

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

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

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

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