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

Jecelyn Yeen

שאילתות של מאגרי CSS שניתן לערוך בחלונית 'סגנונות'

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

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

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

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

בעיה ב-Chromium: 1146422

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

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

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

בעיה ב-Chromium: 1182537

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

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

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

בעיה ב-Chromium: 1190735

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

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

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

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

בעיה ב-Chromium: 1208389

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

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

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

בעיה ב-Chromium: 1213393

Lighthouse 8.1

בחלונית Lighthouse פועלת עכשיו גרסה 8.1 של Lighthouse.

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

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

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

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

בעיה ב-Chromium: 772558

הצגת כתובת ה-URL של הערה חדשה בחלונית המניפסט

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

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

בעיה ב-Chromium: 1185678

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

תוקנו ב-DevTools הסלקטורים התואמים ב-CSS. הם לא פעלו במהדורה האחרונה.

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

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

בעיה ב-Chromium: 1219153

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

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

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

באג ב-Chromium: 998674

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.