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

Jecelyn Yeen

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

עכשיו אתם יכולים להציג ולערוך שאילתות מאגר תגים ב-CSS בחלונית סגנונות.

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

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

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

בעיה ב-Chromium: 1146422

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

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

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

בעיה ב-Chromium: 1182537

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

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

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

בעיה ב-Chromium: 1190735

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

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

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

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

בעיה ב-Chromium: 1208389

ניפוי באגים משופר ב-CORS

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

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

בעיה ב-Chromium: 1213393

Lighthouse גרסה 8.1

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

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

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

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

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

בעיה ב-Chromium: 772558

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

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

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

בעיה ב-Chromium: 1185678

תיקון סלקטורים להתאמות CSS

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

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

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

בעיה ב-Chromium: 1219153

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

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

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

באג ב-Chromium: 998674

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

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

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

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

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

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

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